@extends('admin.layouts.app')

@section('title', 'Inquiries')
@section('page-title', 'Inquiries')

@section('content')
<div class="mb-4 md:mb-6">
    <form id="filter-form" method="GET" action="{{ route('admin.inquiries.index') }}" class="flex flex-col sm:flex-row flex-wrap gap-3">
        <select name="status" id="filter-status" class="w-full sm:w-auto px-4 py-2 md:py-3 border-2 border-[#e8ddd0] rounded-xl focus:ring-2 focus:ring-[#9d8566] focus:border-[#9d8566] transition-all outline-none text-[#524438] bg-white text-sm md:text-base">
            <option value="">All Status</option>
            <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
            <option value="resolved" {{ request('status') == 'resolved' ? 'selected' : '' }}>Resolved</option>
        </select>
        <select name="product_id" id="filter-product" class="w-full sm:w-auto px-4 py-2 md:py-3 border-2 border-[#e8ddd0] rounded-xl focus:ring-2 focus:ring-[#9d8566] focus:border-[#9d8566] transition-all outline-none text-[#524438] bg-white text-sm md:text-base">
            <option value="">All Products</option>
            @foreach($products as $product)
                <option value="{{ $product->id }}" {{ request('product_id') == $product->id ? 'selected' : '' }}>
                    {{ $product->name }}
                </option>
            @endforeach
        </select>
        <input type="date" name="date_from" id="filter-date-from" value="{{ request('date_from') }}" class="w-full sm:w-auto px-4 py-2 md:py-3 border-2 border-[#e8ddd0] rounded-xl focus:ring-2 focus:ring-[#9d8566] focus:border-[#9d8566] transition-all outline-none text-[#524438] text-sm md:text-base">
        <input type="date" name="date_to" id="filter-date-to" value="{{ request('date_to') }}" class="w-full sm:w-auto px-4 py-2 md:py-3 border-2 border-[#e8ddd0] rounded-xl focus:ring-2 focus:ring-[#9d8566] focus:border-[#9d8566] transition-all outline-none text-[#524438] text-sm md:text-base">
        <button type="submit" class="w-full sm:w-auto bg-[#7d6a52] text-white px-4 md:px-6 py-2 md:py-3 rounded-xl hover:bg-[#9d8566] transition-all font-semibold shadow-md text-sm md:text-base">Filter</button>
        <a href="{{ route('admin.inquiries.index') }}" id="clear-filters" class="w-full sm:w-auto bg-[#e8ddd0] text-[#524438] px-4 md:px-6 py-2 md:py-3 rounded-xl hover:bg-[#d4c4b0] transition-all font-semibold text-center text-sm md:text-base">Clear</a>
        <input type="hidden" name="sort" id="sort-column" value="{{ request('sort', 'created_at') }}">
        <input type="hidden" name="direction" id="sort-direction" value="{{ request('direction', 'desc') }}">
    </form>
</div>

<!-- Mobile Card View -->
<div id="mobile-cards-container" class="lg:hidden space-y-4">
    @include('admin.inquiries.partials.mobile-cards', ['inquiries' => $inquiries])
</div>

<!-- Desktop Table View -->
<div class="hidden lg:block bg-white rounded-2xl shadow-md border border-[#e8ddd0] overflow-x-auto">
    <table class="w-full">
        <thead class="bg-[#faf8f5] border-b border-[#e8ddd0]">
            <tr>
                <th class="px-4 xl:px-6 py-3 md:py-4 text-left text-[#524438] font-semibold cursor-pointer hover:bg-[#e8ddd0] transition-colors select-none text-sm md:text-base" data-sort="name">
                    <div class="flex items-center gap-2">
                        <span>Name</span>
                        @if(request('sort') == 'name')
                            @if(request('direction') == 'asc')
                                <svg class="w-4 h-4 text-[#7d6a52]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
                                </svg>
                            @else
                                <svg class="w-4 h-4 text-[#7d6a52]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                </svg>
                            @endif
                        @else
                            <svg class="w-4 h-4 text-gray-400 opacity-0 hover:opacity-100" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path>
                            </svg>
                        @endif
                    </div>
                </th>
                <th class="px-4 xl:px-6 py-3 md:py-4 text-left text-[#524438] font-semibold cursor-pointer hover:bg-[#e8ddd0] transition-colors select-none text-sm md:text-base" data-sort="email">
                    <div class="flex items-center gap-2">
                        <span>Email</span>
                        @if(request('sort') == 'email')
                            @if(request('direction') == 'asc')
                                <svg class="w-4 h-4 text-[#7d6a52]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
                                </svg>
                            @else
                                <svg class="w-4 h-4 text-[#7d6a52]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                </svg>
                            @endif
                        @else
                            <svg class="w-4 h-4 text-gray-400 opacity-0 hover:opacity-100" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path>
                            </svg>
                        @endif
                    </div>
                </th>
                <th class="px-4 xl:px-6 py-3 md:py-4 text-left text-[#524438] font-semibold text-sm md:text-base">Product</th>
                <th class="px-4 xl:px-6 py-3 md:py-4 text-left text-[#524438] font-semibold text-sm md:text-base hidden xl:table-cell">Message</th>
                <th class="px-4 xl:px-6 py-3 md:py-4 text-left text-[#524438] font-semibold cursor-pointer hover:bg-[#e8ddd0] transition-colors select-none text-sm md:text-base" data-sort="status">
                    <div class="flex items-center gap-2">
                        <span>Status</span>
                        @if(request('sort') == 'status')
                            @if(request('direction') == 'asc')
                                <svg class="w-4 h-4 text-[#7d6a52]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
                                </svg>
                            @else
                                <svg class="w-4 h-4 text-[#7d6a52]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                </svg>
                            @endif
                        @else
                            <svg class="w-4 h-4 text-gray-400 opacity-0 hover:opacity-100" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path>
                            </svg>
                        @endif
                    </div>
                </th>
                <th class="px-4 xl:px-6 py-3 md:py-4 text-left text-[#524438] font-semibold cursor-pointer hover:bg-[#e8ddd0] transition-colors select-none text-sm md:text-base" data-sort="created_at">
                    <div class="flex items-center gap-2">
                        <span>Date</span>
                        @if(request('sort', 'created_at') == 'created_at')
                            @if(request('direction', 'desc') == 'asc')
                                <svg class="w-4 h-4 text-[#7d6a52]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
                                </svg>
                            @else
                                <svg class="w-4 h-4 text-[#7d6a52]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                </svg>
                            @endif
                        @else
                            <svg class="w-4 h-4 text-gray-400 opacity-0 hover:opacity-100" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path>
                            </svg>
                        @endif
                    </div>
                </th>
                <th class="px-4 xl:px-6 py-3 md:py-4 text-left text-[#524438] font-semibold text-sm md:text-base">Actions</th>
            </tr>
        </thead>
        <tbody id="table-body-container">
            @include('admin.inquiries.partials.table', ['inquiries' => $inquiries])
        </tbody>
    </table>
</div>

<div id="pagination-container">
    @include('admin.inquiries.partials.pagination', ['inquiries' => $inquiries])
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const filterForm = document.getElementById('filter-form');
    const tableBodyContainer = document.getElementById('table-body-container');
    const paginationContainer = document.getElementById('pagination-container');
    const sortColumnInput = document.getElementById('sort-column');
    const sortDirectionInput = document.getElementById('sort-direction');
    
    // Column header click handlers for sorting
    document.querySelectorAll('th[data-sort]').forEach(header => {
        header.addEventListener('click', function() {
            const column = this.getAttribute('data-sort');
            const currentSort = sortColumnInput.value;
            const currentDirection = sortDirectionInput.value;
            
            // If clicking the same column, toggle direction
            if (currentSort === column) {
                sortDirectionInput.value = currentDirection === 'asc' ? 'desc' : 'asc';
            } else {
                // New column, default to appropriate direction
                sortColumnInput.value = column;
                // For dates, default to desc (newest first)
                // For text (name, email), default to asc (A-Z)
                // For status, default to asc (pending first)
                if (column === 'created_at') {
                    sortDirectionInput.value = 'desc';
                } else {
                    sortDirectionInput.value = 'asc';
                }
            }
            
            applyFilters();
        });
    });
    
    // Filter form submission
    filterForm.addEventListener('submit', function(e) {
        e.preventDefault();
        applyFilters();
    });
    
    // Auto-apply filters on select/input change
    document.getElementById('filter-status').addEventListener('change', applyFilters);
    document.getElementById('filter-product').addEventListener('change', applyFilters);
    document.getElementById('filter-date-from').addEventListener('change', applyFilters);
    document.getElementById('filter-date-to').addEventListener('change', applyFilters);
    
    // Clear filters
    document.getElementById('clear-filters').addEventListener('click', function(e) {
        e.preventDefault();
        filterForm.reset();
        sortColumnInput.value = 'created_at';
        sortDirectionInput.value = 'desc';
        applyFilters();
        window.history.pushState({}, '', '{{ route("admin.inquiries.index") }}');
    });
    
    // Handle pagination clicks
    paginationContainer.addEventListener('click', function(e) {
        if (e.target.closest('.pagination a')) {
            e.preventDefault();
            const url = new URL(e.target.closest('.pagination a').href);
            const page = url.searchParams.get('page');
            applyFilters(page);
        }
    });
    
    // Apply filters via AJAX
    async function applyFilters(page = 1) {
        const formData = new FormData(filterForm);
        formData.append('page', page);
        
        // Show loading state
        tableBodyContainer.innerHTML = '<tr><td colspan="7" class="px-4 md:px-6 py-8 md:py-12 text-center text-[#645443]"><div class="flex items-center justify-center gap-2"><svg class="animate-spin h-5 w-5 text-[#7d6a52]" 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><span>Loading...</span></div></td></tr>';
        const mobileCardsContainer = document.getElementById('mobile-cards-container');
        if (mobileCardsContainer) {
            mobileCardsContainer.innerHTML = '<div class="bg-white rounded-xl shadow-md border border-[#e8ddd0] p-8 text-center"><div class="flex items-center justify-center gap-2"><svg class="animate-spin h-5 w-5 text-[#7d6a52]" 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><span>Loading...</span></div></div>';
        }
        paginationContainer.innerHTML = '';
        
        try {
            const queryString = new URLSearchParams(formData).toString();
            const url = '{{ route("admin.inquiries.index") }}?' + queryString;
            
            const response = await fetch(url, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });
            
            const data = await response.json();
            
            // Update table body - data.html contains just the tr elements
            tableBodyContainer.innerHTML = data.html;
            
            // Update mobile cards
            const mobileCardsContainer = document.getElementById('mobile-cards-container');
            if (mobileCardsContainer) {
                mobileCardsContainer.innerHTML = data.mobileHtml;
            }
            
            // Update pagination
            paginationContainer.innerHTML = data.pagination;
            
            // Update URL without reload
            window.history.pushState({}, '', url);
            
            // Update sort indicators in headers
            updateSortIndicators();
        } catch (error) {
            console.error('Error applying filters:', error);
            tableBodyContainer.innerHTML = '<tr><td colspan="7" class="px-6 py-12 text-center text-red-500">Error loading data. Please try again.</td></tr>';
        }
    }
    
    // Update sort indicators in column headers
    function updateSortIndicators() {
        const currentSort = sortColumnInput.value;
        const currentDirection = sortDirectionInput.value;
        
        document.querySelectorAll('th[data-sort]').forEach(header => {
            const column = header.getAttribute('data-sort');
            const icon = header.querySelector('svg');
            
            if (!icon) return;
            
            if (column === currentSort) {
                // Show active sort icon
                icon.classList.remove('text-gray-400', 'opacity-0');
                icon.classList.add('text-[#7d6a52]');
                
                // Update icon path based on direction
                const path = icon.querySelector('path');
                if (path) {
                    if (currentDirection === 'asc') {
                        path.setAttribute('d', 'M5 15l7-7 7 7');
                    } else {
                        path.setAttribute('d', 'M19 9l-7 7-7-7');
                    }
                }
            } else {
                // Hide inactive sort icon
                icon.classList.remove('text-[#7d6a52]');
                icon.classList.add('text-gray-400', 'opacity-0');
            }
        });
    }
});
</script>
@endpush