@extends('layouts.app')

@section('content')
    <!-- Main Content -->
    <div class="app-content pt-0">
        <div class="container-fluid pt-0">
            <div class="row">
                <div class="col-12">
                    <div class="card shadow-sm border-0">
                        <div class="card-header bg-white py-3 d-flex align-items-center border-bottom-0 px-4">
                            <h5 class="mb-0 fw-bold flex-grow-1">Product Portfolio</h5>
                            @if(auth('admin')->user()?->can('create products'))
                                <a href="{{ route('admin.products.create') }}" class="btn btn-primary d-flex align-items-center gap-2 shadow-sm rounded-pill px-4 ms-auto">
                                    <i class="bi bi-plus-lg"></i>
                                    <span class="fw-bold small">Add Product</span>
                                </a>
                            @endif
                        </div>
                        <div class="card-body pt-0">
                        
                        <div class="d-flex justify-content-between align-items-center mb-4 px-4">
                            <ul class="nav nav-tabs border-0 m-0" id="productStatusTabs" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link {{ $currentStatus === 'active' ? 'active' : '' }}" 
                                       href="{{ route('admin.products.index', ['status' => 'active', 'keyword' => $keyword ?? '']) }}">
                                        <i class="bi bi-check-circle me-1"></i>
                                        Live Products 
                                        <span class="badge bg-success ms-2">{{ $activeCount }}</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link {{ $currentStatus === 'inactive' ? 'active' : '' }}" 
                                       href="{{ route('admin.products.index', ['status' => 'inactive', 'keyword' => $keyword ?? '']) }}">
                                        <i class="bi bi-pause-circle me-1"></i>
                                        Archive
                                        <span class="badge bg-secondary ms-2">{{ $inactiveCount }}</span>
                                    </a>
                                </li>
                            </ul>

                            <form id="search-form" method="GET" action="{{ route('admin.products.index') }}" class="d-flex align-items-center gap-2 m-0">
                                <input type="hidden" name="status" id="current-status" value="{{ $currentStatus }}">
                                <input type="text" name="keyword" id="keyword-search" class="form-control" style="max-width: 250px;" placeholder="Search products..." value="{{ $keyword ?? '' }}" autocomplete="off">
                                
                                @if(!empty($keyword) || !empty($category_id))
                                    <a href="{{ route('admin.products.index', ['status' => $currentStatus]) }}" class="btn btn-outline-secondary">Reset</a>
                                @endif
                            </form>
                        </div>

                        <div id="product-results-wrapper">
                            @include('admin.products.partials._table')
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

@push('modals')
    <!-- Product Detail Modal -->
    <div class="modal fade" id="productDetailModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden" id="product-detail-modal-body">
                <div class="modal-body text-center py-5">
                    <div class="spinner-border text-primary mb-3" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <h5 class="text-muted fw-light">Fetching product details...</h5>
                </div>
            </div>
        </div>
    </div>
@endpush
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Status Toggle Switch Logic
        const initToggleSwitches = () => {
            const toggleSwitches = document.querySelectorAll('.status-toggle-switch');
            toggleSwitches.forEach(function(sw) {
                // Remove existing listeners to prevent duplicates
                sw.replaceWith(sw.cloneNode(true));
            });
            
            document.querySelectorAll('.status-toggle-switch').forEach(sw => {
                sw.addEventListener('change', function() {
                    const productId = this.getAttribute('data-id');
                    window.location.href = `/admin/products/${productId}/toggle-status`;
                });
            });
        };

        initToggleSwitches();

        // AJAX Search Logic
        const searchInput = document.getElementById('keyword-search');
        const resultsWrapper = document.getElementById('product-results-wrapper');
        const statusInput = document.getElementById('current-status');
        let debounceTimer;

        if (searchInput) {
            searchInput.addEventListener('keyup', function() {
                const keyword = this.value;
                const status = statusInput.value;

                clearTimeout(debounceTimer);
                
                // Trigger search on 3+ characters or if search is cleared
                if (keyword.length >= 3 || keyword.length === 0) {
                    debounceTimer = setTimeout(() => {
                        fetchResults(keyword, status);
                    }, 400); // 400ms debounce
                }
            });
        }

        // Global Modal for details
        const detailModal = new bootstrap.Modal(document.getElementById('productDetailModal'));
        const modalBody = document.getElementById('product-detail-modal-body');
        const defaultModalContent = modalBody.innerHTML;

        // Handler for "View Details" buttons (use event delegation for AJAX compatibility)
        document.addEventListener('click', function(e) {
            const viewBtn = e.target.closest('.view-product-btn');
            if (viewBtn) {
                e.preventDefault();
                const productId = viewBtn.getAttribute('data-id');
                const url = `/admin/products/${productId}`;

                // Reset modal to loading state and show
                modalBody.innerHTML = defaultModalContent;
                detailModal.show();

                // Fetch details via AJAX
                fetch(url, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'text/html'
                    }
                })
                .then(response => {
                    if (!response.ok) throw new Error('Product retrieval failed.');
                    return response.text();
                })
                .then(html => {
                    modalBody.innerHTML = html;
                })
                .catch(error => {
                    modalBody.innerHTML = `
                        <div class="modal-header">
                            <h5 class="modal-title">Error</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body text-center py-5">
                            <i class="bi bi-exclamation-triangle text-danger fs-1"></i>
                            <p class="mt-2">${error.message}</p>
                        </div>`;
                });
            }
        });

        function fetchResults(keyword, status) {
            resultsWrapper.style.opacity = '0.5'; // Visual feedback
            
            const url = new URL(window.location.href);
            url.searchParams.set('keyword', keyword);
            url.searchParams.set('status', status);
            url.searchParams.set('page', 1); // Reset to page 1 on new search

            fetch(url, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.text())
            .then(html => {
                resultsWrapper.innerHTML = html;
                resultsWrapper.style.opacity = '1';
                initToggleSwitches(); // Re-initialize toggles for new content
                
                // Update URL without reloading
                window.history.pushState({}, '', url);
            })
            .catch(error => {
                console.error('Error fetching results:', error);
                resultsWrapper.style.opacity = '1';
            });
        }
    });
</script>
@endpush