@extends('layouts.admin')

@section('title', 'Admin - Site Management')

@section('content')
    <div class="p-6">
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-2xl font-bold text-gray-800 flex items-center gap-3">
                Site Management
                <span class="px-2.5 py-0.5 rounded-full bg-blue-50 text-blue-600 text-sm font-bold border border-blue-100">
                    {{ $sites->total() }}
                </span>
            </h1>
            <a id="export-pdf-btn" href="{{ route('admin.sites.export-pdf', request()->all()) }}" target="_blank"
                class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition font-medium flex items-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
                Export PDF
            </a>
        </div>

        <!-- Search and Table Container (AlpineJS AJAX) -->
        <div x-data="sitesSearch()" class="space-y-6">
            <!-- Filters & Search -->
            <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
                <form @submit.prevent class="flex flex-wrap gap-4">
                    <div class="flex-1 min-w-[200px]">
                        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Search</label>
                        <input type="text" x-model.debounce.500ms="search" placeholder="Search Name or Site ID..."
                            class="w-full px-3 py-2 text-sm border border-gray-200 rounded-md focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all">
                    </div>
                    <div class="w-64">
                        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Company</label>
                        <select x-model="company_id" @change="fetchSites()"
                            class="w-full px-3 py-2 text-sm border border-gray-200 rounded-md focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all">
                            <option value="">All Companies</option>
                            @foreach($companies as $company)
                                <option value="{{ $company->id }}">
                                    {{ $company->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="flex items-end">
                        <button type="button" @click="resetFilters()"
                            class="px-6 py-2 bg-gray-100 text-gray-600 text-sm font-bold rounded-md hover:bg-gray-200 transition-all">
                            Reset Filters
                        </button>
                        <!-- Loading Indicator -->
                        <div x-show="loading" class="ml-4 flex items-center justify-center text-blue-600 mb-2">
                            <svg class="animate-spin h-5 w-5" 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>
                        </div>
                    </div>
                </form>
            </div>

            @if(session('success'))
                <div class="p-4 bg-green-50 border border-green-100 text-green-700 rounded-lg flex items-center gap-3">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                    {{ session('success') }}
                </div>
            @endif

            <!-- Sites Table Output -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden relative">
                <div id="table-container" x-html="tableHtml" :class="{ 'opacity-50 pointer-events-none': loading }" class="transition-opacity duration-200">
                    @include('admin.sites.partials.table', ['sites' => $sites])
                </div>
            </div>
        </div>
    </div>

    <!-- AJAX Search Script -->
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('sitesSearch', () => ({
                search: new URLSearchParams(window.location.search).get('search') || '',
                company_id: new URLSearchParams(window.location.search).get('company_id') || '',
                tableHtml: '',
                loading: false,

                init() {
                    // Set up watch on search input since x-model.debounce triggers property change,
                    // we can trigger the fetch when the value actually updates post-debounce.
                    this.$watch('search', value => {
                        this.fetchSites();
                    });

                    // Initial HTML comes from blade 
                    this.tableHtml = document.getElementById('table-container').innerHTML;
                },

                fetchSites(url = null) {
                    this.loading = true;
                    
                    // Build URL with parameters
                    const fetchUrl = new URL(url || '{{ route('admin.sites.index') }}');
                    if (this.search) fetchUrl.searchParams.set('search', this.search);
                    if (this.company_id) fetchUrl.searchParams.set('company_id', this.company_id);
                    
                    // Update browser history so URL is shareable/refreshable
                    window.history.pushState({}, '', fetchUrl);

                    // Update PDF Export Link dynamically
                    const exportBtn = document.getElementById('export-pdf-btn');
                    if(exportBtn) {
                        const exportUrl = new URL('{{ route('admin.sites.export-pdf') }}');
                        if (this.search) exportUrl.searchParams.set('search', this.search);
                        if (this.company_id) exportUrl.searchParams.set('company_id', this.company_id);
                        exportBtn.href = exportUrl.toString();
                    }

                    // Add AJAX header to request partial view
                    fetch(fetchUrl, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(response => response.text())
                    .then(html => {
                        this.tableHtml = html;
                    })
                    .catch(error => {
                        console.error("Error fetching sites:", error);
                    })
                    .finally(() => {
                        this.loading = false;
                        
                        // Re-initialize any pagination links dynamically 
                        setTimeout(() => {
                            this.bindPaginationLinks();
                        }, 50);
                    });
                },

                resetFilters() {
                    this.search = '';
                    this.company_id = '';
                    this.fetchSites('{{ route('admin.sites.index') }}');
                },

                bindPaginationLinks() {
                    // Intercept pagination clicks and use AJAX instead
                    const container = document.getElementById('table-container');
                    if (!container) return;
                    
                    const links = container.querySelectorAll('.pagination a, nav[role="navigation"] a');
                    links.forEach(link => {
                        link.addEventListener('click', (e) => {
                            e.preventDefault();
                            this.fetchSites(link.href);
                        });
                    });
                }
            }));
        });
        
        // Needed because Alpine overwrites the HTML, destroying original onclicks
        function toggleStatus(url, btn) {
            btn.disabled = true;
            fetch(url, {
                method: 'PATCH',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    const toggleSpan = btn.querySelector('span');
                    if(data.active) {
                        btn.classList.remove('bg-gray-200');
                        btn.classList.add('bg-blue-600');
                        toggleSpan.classList.remove('translate-x-0');
                        toggleSpan.classList.add('translate-x-5');
                    } else {
                        btn.classList.add('bg-gray-200');
                        btn.classList.remove('bg-blue-600');
                        toggleSpan.classList.add('translate-x-0');
                        toggleSpan.classList.remove('translate-x-5');
                    }
                }
            })
            .catch(err => console.error(err))
            .finally(() => {
                btn.disabled = false;
            });
        }
    </script>
    </div>

@endsection