@extends('layout.super-admin-two')

@section('title', 'Organizational Units')

@push('styles')
    <style>
        /* Level badges with modern colors */
        .badge-level-1 {
            background: linear-gradient(135deg, #6f42c1 0%, #7c52d4 100%);
            color: white;
            font-weight: 500;
        }

        .badge-level-2 {
            background: linear-gradient(135deg, #0d6efd 0%, #0d47a1 100%);
            color: white;
            font-weight: 500;
        }

        .badge-level-3 {
            background: linear-gradient(135deg, #198754 0%, #0f5e30 100%);
            color: white;
            font-weight: 500;
        }

        .badge-level-4 {
            background: linear-gradient(135deg, #fd7e14 0%, #ff9800 100%);
            color: white;
            font-weight: 500;
        }

        .badge-level-5 {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
            color: white;
            font-weight: 500;
        }

        .badge-level-6 {
            background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
            color: white;
            font-weight: 500;
        }

        .bg-info-light {
            background-color: #e7f3ff !important;
        }

        .text-info {
            color: #0066cc !important;
        }
        /* table */
        tbody tr {
            min-height: 60px;
        }

        tbody td {
            vertical-align: middle;
            padding: 12px 8px; /* Adjust padding for consistency */
        }

        /* Form styling */
        .form-control, .form-select {
            border-radius: 0.375rem;
            border: 1px solid #dee2e6;
            transition: all 0.2s ease;
        }

        .form-control:focus, .form-select:focus {
            border-color: #0d6efd;
            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
        }

        .input-group-sm .form-control {
            height: auto;
            padding: 0.375rem 0.75rem;
        }

        /* Card styling */
        .card {
            border: none;
            border-radius: 0.5rem;
        }

        /* Sticky header */
        thead.sticky-top {
            top: 0;
            z-index: 10;
        }

        /* Border light */
        .border-bottom-light {
            border-bottom: 1px solid #f0f0f0 !important;
        }

        /* Tooltip */
        .tooltip-inner {
            background-color: #333;
            padding: 0.5rem 0.75rem;
            border-radius: 0.375rem;
        }

        /* Button styling */
        .btn-outline-primary:hover,
        .btn-outline-warning:hover,
        .btn-outline-success:hover {
            transition: all 0.2s ease;
        }

        /* Loading skeleton styles */
        .skeleton-row {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
        }

        .skeleton {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: loading 1.5s infinite;
            border-radius: 4px;
        }

        @keyframes loading {
            0% {
                background-position: 200% 0;
            }
            100% {
                background-position: -200% 0;
            }
        }

        /* Spinner color */
        .spinner-border {
            width: 3rem;
            height: 3rem;
        }

        /* Error state styling */
        .error-state {
            padding: 20px;
        }
    </style>
@endpush

@section('content')
    <div class="page-header">
        <h1>Organizational Units</h1>
        <p>Manage and organize your institution's hierarchical structure</p>
    </div>

    {{-- Success/Error Messages --}}
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="bi bi-check-circle-fill me-2"></i>  
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-circle me-2"></i>
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="card shadow-sm">
        <div class="card-header border-bottom d-flex justify-content-between align-items-center" style="background-color: #E8F0FF;">

            <div class="text-primary">
                <i class="bi bi-file-text text-primary me-1"></i>
                Organizational List
            </div>

            <div class="d-flex align-items-center gap-2 flex-wrap">

                <!-- Search -->
                <div class="input-group input-group-sm" style="width: 320px;">
                    <input type="text" 
                        id="searchInput"
                        class="form-control"
                        placeholder="Search">

                    <button class="btn btn-outline-primary" 
                            type="button"
                            onclick="OrgChartLoader.search()">
                        <i class="bi bi-search"></i>
                    </button>

                    <button class="btn btn-outline-secondary"
                            type="button"
                            id="clearSearchBtn"
                            style="display: none;"
                            onclick="OrgChartLoader.clearSearch()">
                        <i class="bi bi-x"></i>
                    </button>
                </div>

                <!-- Filter -->
                <div style="width: 180px;">
                    <select id="typeFilter"
                            class="form-select form-select-sm"
                            onchange="OrgChartLoader.filterByType()">
                        <option value="">All Types</option>
                        <option value="CO">Central Office</option>
                        <option value="RO">Regional Office</option>
                        <option value="SDO">Division Office</option>
                        <option value="DIST">District Office</option>
                        <option value="SCH">School</option>
                    </select>
                </div>

                <!-- Button -->
                <a href="{{ route('admin.organizational-units.create') }}"
                class="btn btn-primary btn-sm">
                    <i class="bi bi-plus-lg"></i> Add New Unit
                </a>

            </div>
            
        </div>
        
        <div class="card-body">
            <!-- Loading state - shown initially -->
            <div id="loadingState" class="loading-state">
                <div class="text-center py-5">
                    <div class="spinner-border text-primary mb-3" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="text-muted">Loading organizational units...</p>
                </div>
            </div>

            <!-- Error state -->
            <div id="errorState" class="error-state" style="display: none;">
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="bi bi-exclamation-triangle"></i>
                    <strong>Error Loading Data</strong>
                    <p id="errorMessage" class="mb-2"></p>
                    <button type="button" class="btn btn-sm btn-outline-danger" onclick="OrgChartLoader.retry()">
                        <i class="bi bi-arrow-clockwise"></i> Retry
                    </button>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            </div>

            <!-- Content state - shown after data loads -->
            <div id="contentState" style="display: none;">
                {{-- Search and Filter Section --}}
                <div class="row g-2 mb-4">
                    <!-- Empty state -->
                    <div id="emptyState" style="display: none;">
                        <div class="text-center py-5">
                            <i class="bi bi-inbox" style="font-size: 3rem; color: #ccc;"></i>
                            <p class="text-muted mt-3 mb-0">No organizational units found</p>
                            <a href="{{ route('admin.organizational-units.create') }}" class="btn btn-primary btn-sm mt-3">
                                <i class="bi bi-plus-lg"></i> Create the first one
                            </a>
                        </div>
                    </div>

                    {{-- Table --}}
                    <div id="tableContainer" style="display: none;">
                        <div class="table-responsive">
                            <table class="table table-hover table-border align-middle mb-0">
                                <thead class="sticky-top">
                                    <tr>
                                        <th style="width: 10%; height">
                                            <span class="text-muted">Level</span>
                                        </th>
                                        <th style="width: 25%; height">
                                            <span class="text-muted">Station Name</span>
                                        </th>
                                        <th style="width: 12%; height">
                                            <span class="text-muted">Type</span>
                                        </th>
                                        <th style="width: 12%; height">
                                            <span class="text-muted">Short Name</span>
                                        </th>
                                        <th style="width: 20%; height">
                                            <span class="text-muted">Hierarchy Path</span>
                                        </th>
                                        <th style="width: 8%; height">
                                            <span class="text-muted">Children</span>
                                        </th>
                                        <th style="width: 13%; height">
                                            <span class="text-muted">Actions</span>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody id="tableBody">
                                    <!-- Rows inserted here by JavaScript -->
                                </tbody>
                            </table>
                        </div>

                        {{-- Pagination and Info --}}
                        <div class="d-flex justify-content-between align-items-center mt-4 pt-3 border-top">
                            <div class="text-muted small">                            
                                Showing <strong id="itemStart">0</strong> to <strong id="itemEnd">0</strong> of <strong id="itemTotal">0</strong> units
                            </div>
                            <nav id="paginationContainer"></nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        const OrgChartLoader = {
            apiUrl: '{{ route("admin.organizational-units") }}',
            currentFilters: {
                search: '',
                type: '',
                page: 1
            },
            currentData: null,
            currentDataSize: 0,

            /**
             * Initialize the loader on page load
             */
            init: function() {
                this.loadData();
                this.setupEventListeners();
            },

            /**
             * Setup event listeners for search and filter inputs
             */
            setupEventListeners: function() {
                document.getElementById('searchInput').addEventListener('keypress', (e) => {
                    if (e.key === 'Enter') {
                        this.search();
                    }
                });
            },

            /**
             * Load data from server via AJAX
             */
            loadData: function() {
                const params = new URLSearchParams({
                    search: this.currentFilters.search,
                    type: this.currentFilters.type,
                    page: this.currentFilters.page,
                    ajax: 1
                });

                const loadingState = document.getElementById('loadingState');
                const errorState = document.getElementById('errorState');
                const contentState = document.getElementById('contentState');

                // Show loading state
                loadingState.style.display = 'block';
                errorState.style.display = 'none';
                contentState.style.display = 'none';

                console.log('🔄 Loading data with params:', Object.fromEntries(params));

                fetch(`${this.apiUrl}?${params}`)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error(`HTTP error! status: ${response.status}`);
                        }
                        return response.json();
                    })
                    .then(response => {
                        console.log('✅ API Response received:', response);
                        
                        if (response.success) {
                            // Store the ENTIRE response structure with data and meta
                            this.currentData = {
                                data: response.data,
                                meta: response.meta
                            };
                            this.currentDataSize = response.dataSize;
                            
                            console.log('📦 Data stored:', {
                                itemCount: this.currentData.data.length,
                                currentPage: this.currentData.meta?.current_page,
                                totalPages: this.currentData.meta?.last_page,
                                totalItems: this.currentData.meta?.total,
                                dataSize: this.currentDataSize + ' bytes'
                            });
                            
                            this.renderContent();
                            
                            // Show content state
                            loadingState.style.display = 'none';
                            errorState.style.display = 'none';
                            contentState.style.display = 'block';
                            
                            console.log('Content rendered successfully');
                        } else {
                            throw new Error(response.error || 'Unknown error occurred');
                        }
                    })
                    .catch(error => {
                        console.error('Error loading data:', error);
                        this.showError(error.message);
                        
                        // Show error state
                        loadingState.style.display = 'none';
                        errorState.style.display = 'block';
                        contentState.style.display = 'none';
                    });
            },

            /**
             * Render the table and pagination
             */
            renderContent: function() {
                if (!this.currentData || !this.currentData.data || this.currentData.data.length === 0) {
                    this.showEmptyState();
                    return;
                }

                document.getElementById('emptyState').style.display = 'none';
                document.getElementById('tableContainer').style.display = 'block';
                
                this.renderTable();
                this.renderPagination();
                this.updatePaginationInfo();

            },

            /**
             * Render table rows
             */
            renderTable: function() {
                const tableBody = document.getElementById('tableBody');
                tableBody.innerHTML = '';

                if (!this.currentData || !this.currentData.data) {
                    return;
                }

                this.currentData.data.forEach(station => {
                    const row = this.createTableRow(station);
                    tableBody.appendChild(row);
                });

                // Initialize tooltips for new buttons
                this.initializeTooltips();
            },

            /**
             * Create a table row element
             */
            createTableRow: function(station) {
                const tr = document.createElement('tr');
                tr.className = 'border-bottom-light';

                const levelBadgeClass = `badge-level-${station.station_type?.authority_level || 1}`;
                const stationName = station.names && station.names.length > 0 
                    ? station.names[0].station_name 
                    : 'Unknown';
                const shortName = station.names && station.names.length > 0 
                    ? station.names[0].shortname 
                    : '—';

                // Build URLs
                const showUrl = `/sa-orgchart/${station.id}`;
                const editUrl = `/sa-orgchart/${station.id}/edit`;
                const createUrl = `/sa-orgchart/create?parent=${station.id}`;

                tr.innerHTML = `
                    <td>
                        <span class="badge ${levelBadgeClass} rounded-pill">
                            Lvl ${station.station_type?.authority_level || '—'}
                        </span>
                    </td>
                    <td>
                        <a href="${showUrl}" class="text-decoration-none text-dark fw-500 hover-link">
                            <strong>${this.escapeHtml(stationName)}</strong>
                        </a>
                    </td>
                    <td>
                        <span class="badge ${levelBadgeClass} rounded-pill">
                            ${station.station_type?.shortcode || '—'}
                        </span>
                    </td>
                    <td>
                        <code class="text-muted small">${this.escapeHtml(shortName)}</code>
                    </td>
                    <td>
                        <small class="text-muted d-inline-block" style="max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="${this.escapeHtml(stationName)}">
                            ${this.escapeHtml(stationName)}
                        </small>
                    </td>
                    <td>
                        ${station.children_count > 0 
                            ? `<span class="badge bg-info-light text-info rounded-pill"><i class="bi bi-diagram-3"></i> ${station.children_count}</span>`
                            : '<span class="text-muted small">—</span>'
                        }
                    </td>
                    <td>                       
                        <a href="${showUrl}" 
                        class="btn btn-sm btn-outline-primary" 
                        title="View details"
                        data-bs-toggle="tooltip"
                        data-bs-placement="top">
                            <i class="bi bi-eye"></i>
                        </a>

                        <a href="${editUrl}" 
                        class="btn btn-sm btn-outline-warning" 
                        title="Edit"
                        data-bs-toggle="tooltip"
                        data-bs-placement="top">
                            <i class="bi bi-pencil"></i>
                        </a>

                        <a href="${createUrl}" 
                        class="btn btn-sm btn-outline-success" 
                        title="Add child unit"
                        data-bs-toggle="tooltip"
                        data-bs-placement="top">
                            <i class="bi bi-plus-circle"></i>
                        </a>                      
                    </td>
                `;

                return tr;
            },

            /**
             * Render pagination
             */
            renderPagination: function() {
                const paginationContainer = document.getElementById('paginationContainer');
                paginationContainer.innerHTML = '';

                if (!this.currentData || !this.currentData.meta) {
                    return;
                }

                const meta = this.currentData.meta;
                
                // Don't show pagination if only one page
                if (meta.last_page <= 1) {
                    return;
                }

                const nav = document.createElement('nav');
                nav.setAttribute('aria-label', 'Page navigation');
                const ul = document.createElement('ul');
                ul.className = 'pagination mb-0';

                // Previous button
                if (meta.current_page > 1) {
                    const li = document.createElement('li');
                    li.className = 'page-item';
                    li.innerHTML = `
                        <a class="page-link" href="#" onclick="OrgChartLoader.goToPage(${meta.current_page - 1}); return false;">
                            <i class="bi bi-chevron-left"></i> Previous
                        </a>
                    `;
                    ul.appendChild(li);
                } else {
                    const li = document.createElement('li');
                    li.className = 'page-item disabled';
                    li.innerHTML = `
                        <span class="page-link">
                            <i class="bi bi-chevron-left"></i> Previous
                        </span>
                    `;
                    ul.appendChild(li);
                }

                // Page numbers with smart display
                const maxPages = 5;
                let startPage = Math.max(1, meta.current_page - Math.floor(maxPages / 2));
                let endPage = Math.min(meta.last_page, startPage + maxPages - 1);
                
                if (endPage - startPage < maxPages - 1) {
                    startPage = Math.max(1, endPage - maxPages + 1);
                }

                // First page
                if (startPage > 1) {
                    const li = document.createElement('li');
                    li.className = 'page-item';
                    li.innerHTML = `
                        <a class="page-link" href="#" onclick="OrgChartLoader.goToPage(1); return false;">1</a>
                    `;
                    ul.appendChild(li);

                    if (startPage > 2) {
                        const li = document.createElement('li');
                        li.className = 'page-item disabled';
                        li.innerHTML = `<span class="page-link">...</span>`;
                        ul.appendChild(li);
                    }
                }

                // Page numbers
                for (let i = startPage; i <= endPage; i++) {
                    const li = document.createElement('li');
                    if (i === meta.current_page) {
                        li.className = 'page-item active';
                        li.innerHTML = `
                            <span class="page-link">
                                ${i}
                                <span class="visually-hidden">(current)</span>
                            </span>
                        `;
                    } else {
                        li.className = 'page-item';
                        li.innerHTML = `
                            <a class="page-link" href="#" onclick="OrgChartLoader.goToPage(${i}); return false;">
                                ${i}
                            </a>
                        `;
                    }
                    ul.appendChild(li);
                }

                // Last page
                if (endPage < meta.last_page) {
                    if (endPage < meta.last_page - 1) {
                        const li = document.createElement('li');
                        li.className = 'page-item disabled';
                        li.innerHTML = `<span class="page-link">...</span>`;
                        ul.appendChild(li);
                    }

                    const li = document.createElement('li');
                    li.className = 'page-item';
                    li.innerHTML = `
                        <a class="page-link" href="#" onclick="OrgChartLoader.goToPage(${meta.last_page}); return false;">
                            ${meta.last_page}
                        </a>
                    `;
                    ul.appendChild(li);
                }

                // Next button
                if (meta.current_page < meta.last_page) {
                    const li = document.createElement('li');
                    li.className = 'page-item';
                    li.innerHTML = `
                        <a class="page-link" href="#" onclick="OrgChartLoader.goToPage(${meta.current_page + 1}); return false;">
                            Next <i class="bi bi-chevron-right"></i>
                        </a>
                    `;
                    ul.appendChild(li);
                } else {
                    const li = document.createElement('li');
                    li.className = 'page-item disabled';
                    li.innerHTML = `
                        <span class="page-link">
                            Next <i class="bi bi-chevron-right"></i>
                        </span>
                    `;
                    ul.appendChild(li);
                }

                nav.appendChild(ul);
                paginationContainer.appendChild(nav);
            },

            /**
             * Update pagination info
             */
            updatePaginationInfo: function() {
                if (!this.currentData || !this.currentData.meta) {
                    return;
                }

                const meta = this.currentData.meta;
                const from = meta.from || 0;
                const to = meta.to || 0;
                const total = meta.total || 0;

                document.getElementById('itemStart').textContent = from;
                document.getElementById('itemEnd').textContent = to;
                document.getElementById('itemTotal').textContent = total;
            },


            /**
             * Show empty state
             */
            showEmptyState: function() {
                document.getElementById('emptyState').style.display = 'block';
                document.getElementById('tableContainer').style.display = 'none';
            },

            /**
             * Show error message
             */
            showError: function(message) {
                document.getElementById('errorMessage').textContent = message;
            },

            /**
             * Search for stations
             */
            search: function() {
                this.currentFilters.search = document.getElementById('searchInput').value;
                this.currentFilters.page = 1;
                document.getElementById('clearSearchBtn').style.display = 
                    this.currentFilters.search ? 'inline-block' : 'none';
                this.loadData();
            },

            /**
             * Clear search
             */
            clearSearch: function() {
                document.getElementById('searchInput').value = '';
                this.currentFilters.search = '';
                this.currentFilters.page = 1;
                document.getElementById('clearSearchBtn').style.display = 'none';
                this.loadData();
            },

            /**
             * Filter by type
             */
            filterByType: function() {
                this.currentFilters.type = document.getElementById('typeFilter').value;
                this.currentFilters.page = 1;
                this.loadData();
            },

            /**
             * Go to page
             */
            goToPage: function(page) {
                this.currentFilters.page = page;
                this.loadData();
                window.scrollTo({ top: 0, behavior: 'smooth' });
            },

            /**
             * Retry loading data
             */
            retry: function() {
                this.loadData();
            },

            /**
             * Initialize Bootstrap tooltips
             */
            initializeTooltips: function() {
                if (typeof bootstrap !== 'undefined') {
                    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
                    tooltipTriggerList.forEach(function (tooltipTriggerEl) {
                        new bootstrap.Tooltip(tooltipTriggerEl);
                    });
                }
            },

            /**
             * Escape HTML to prevent XSS
             */
            escapeHtml: function(text) {
                if (!text) return '';
                const map = {
                    '&': '&amp;',
                    '<': '&lt;',
                    '>': '&gt;',
                    '"': '&quot;',
                    "'": '&#039;'
                };
                return text.replace(/[&<>"']/g, m => map[m]);
            }
        };

        // Initialize on page load
        document.addEventListener('DOMContentLoaded', function() {
            OrgChartLoader.init();
        });


        setTimeout(function () {
            document.querySelectorAll('.alert').forEach(function(alert) {
                let bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            });
        }, 3000);

    </script>
@endpush