@extends('layouts.admin')

@section('title', 'Manage Websites')

@section('content')
<div class="min-h-screen bg-gray-50 py-6">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <div class="mb-8">
            <div class="sm:flex sm:items-center sm:justify-between">
                <div>
                    <h1 class="text-3xl font-bold text-gray-900">Website Management</h1>
                    <p class="mt-2 text-gray-600">Monitor and manage all created websites</p>
                </div>
                <div class="mt-4 sm:mt-0 sm:flex sm:space-x-3">
                    <button onclick="refreshData()" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        <i class="fas fa-sync-alt mr-2"></i>
                        Refresh
                    </button>
                    <a href="{{ route('templates.index') }}" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        <i class="fas fa-plus mr-2"></i>
                        Create New Website
                    </a>
                </div>
            </div>
        </div>

        <!-- Stats Cards -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-5 mb-8">
            <div class="bg-white overflow-hidden shadow rounded-lg">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <i class="fas fa-globe-americas text-blue-400 text-2xl"></i>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">Total Websites</dt>
                                <dd class="text-lg font-medium text-gray-900" id="total-websites">{{ $stats['total'] ?? 0 }}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white overflow-hidden shadow rounded-lg">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <i class="fas fa-check-circle text-green-400 text-2xl"></i>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">Completed</dt>
                                <dd class="text-lg font-medium text-gray-900" id="completed-websites">{{ $stats['completed'] ?? 0 }}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white overflow-hidden shadow rounded-lg">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <i class="fas fa-clock text-yellow-400 text-2xl"></i>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">In Progress</dt>
                                <dd class="text-lg font-medium text-gray-900" id="processing-websites">{{ $stats['processing'] ?? 0 }}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white overflow-hidden shadow rounded-lg">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <i class="fas fa-exclamation-triangle text-red-400 text-2xl"></i>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">Failed</dt>
                                <dd class="text-lg font-medium text-gray-900" id="failed-websites">{{ $stats['failed'] ?? 0 }}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filters -->
        <div class="bg-white shadow sm:rounded-md mb-6">
            <div class="px-4 py-3 border-b border-gray-200">
                <h3 class="text-lg leading-6 font-medium text-gray-900">Filters</h3>
            </div>
            <div class="px-4 py-3">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div>
                        <label for="status-filter" class="block text-sm font-medium text-gray-700">Status</label>
                        <select id="status-filter" name="status" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                            <option value="">All Statuses</option>
                            <option value="pending">Pending</option>
                            <option value="processing">Processing</option>
                            <option value="completed">Completed</option>
                            <option value="failed">Failed</option>
                            <option value="suspended">Suspended</option>
                        </select>
                    </div>
                    <div>
                        <label for="template-filter" class="block text-sm font-medium text-gray-700">Template</label>
                        <select id="template-filter" name="template" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                            <option value="">All Templates</option>
                            <option value="handyman">Handyman</option>
                            <option value="boldman">Boldman</option>
                            <option value="repairer">Repairer</option>
                            <option value="autorepair">Auto Repair</option>
                            <option value="cleaning">Cleaning</option>
                            <option value="plumbing">Plumbing</option>
                        </select>
                    </div>
                    <div>
                        <label for="date-filter" class="block text-sm font-medium text-gray-700">Date Range</label>
                        <select id="date-filter" name="date" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                            <option value="">All Time</option>
                            <option value="today">Today</option>
                            <option value="week">Last 7 days</option>
                            <option value="month">Last 30 days</option>
                        </select>
                    </div>
                    <div>
                        <label for="search-filter" class="block text-sm font-medium text-gray-700">Search</label>
                        <input type="text" id="search-filter" name="search" placeholder="Company name, subdomain..." class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                    </div>
                </div>
            </div>
        </div>

        <!-- Websites Table -->
        <div class="bg-white shadow overflow-hidden sm:rounded-md">
            <div class="px-4 py-3 border-b border-gray-200">
                <h3 class="text-lg leading-6 font-medium text-gray-900">Websites</h3>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Website</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Company</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Template</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Progress</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200" id="websites-table-body">
                        @forelse($websites ?? [] as $website)
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-10 w-10">
                                        <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
                                            <i class="fas fa-globe text-blue-600"></i>
                                        </div>
                                    </div>
                                    <div class="ml-4">
                                        <div class="text-sm font-medium text-gray-900">
                                            {{ $website->subdomain ?? 'N/A' }}.{{ $website->domain ?? 'domain.com' }}
                                        </div>
                                        <div class="text-sm text-gray-500">
                                            @if($website->website_url ?? false)
                                            <a href="{{ $website->website_url }}" target="_blank" class="text-blue-600 hover:text-blue-800">
                                                <i class="fas fa-external-link-alt mr-1"></i>Visit Site
                                            </a>
                                            @else
                                            <span class="text-gray-400">URL not available</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900">{{ $website->company_name ?? 'N/A' }}</div>
                                <div class="text-sm text-gray-500">{{ $website->email ?? 'N/A' }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900 capitalize">{{ $website->tpl_name ?? 'N/A' }}</div>
                                <div class="text-sm text-gray-500">{{ $website->category ?? 'N/A' }}/{{ $website->subcategory ?? 'N/A' }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @php
                                    $status = $website->status ?? 'pending';
                                    $statusColors = [
                                        'pending' => 'bg-yellow-100 text-yellow-800',
                                        'processing' => 'bg-blue-100 text-blue-800',
                                        'completed' => 'bg-green-100 text-green-800',
                                        'failed' => 'bg-red-100 text-red-800',
                                        'suspended' => 'bg-gray-100 text-gray-800'
                                    ];
                                @endphp
                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full {{ $statusColors[$status] ?? 'bg-gray-100 text-gray-800' }}">
                                    {{ ucfirst($status) }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="w-full bg-gray-200 rounded-full h-2">
                                    <div class="bg-blue-600 h-2 rounded-full" style="width: {{ $website->progress ?? 0 }}%"></div>
                                </div>
                                <div class="text-xs text-gray-500 mt-1">{{ $website->progress ?? 0 }}%</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ optional($website->created_at ?? now())->format('M j, Y g:i A') }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <div class="flex space-x-2">
                                    @if($website->website_url ?? false)
                                    <a href="{{ $website->website_url }}" target="_blank" class="text-blue-600 hover:text-blue-900">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    @endif
                                    @if($website->admin_url ?? false)
                                    <a href="{{ $website->admin_url }}" target="_blank" class="text-green-600 hover:text-green-900">
                                        <i class="fas fa-cog"></i>
                                    </a>
                                    @endif
                                    <button onclick="showDetails({{ $website->id ?? 0 }})" class="text-indigo-600 hover:text-indigo-900">
                                        <i class="fas fa-info-circle"></i>
                                    </button>
                                    @if(($website->status ?? 'pending') === 'failed')
                                    <button onclick="retryWebsite({{ $website->id ?? 0 }})" class="text-yellow-600 hover:text-yellow-900">
                                        <i class="fas fa-redo"></i>
                                    </button>
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="px-6 py-12 text-center">
                                <div class="text-gray-500">
                                    <i class="fas fa-globe text-4xl mb-4"></i>
                                    <p class="text-lg font-medium">No websites found</p>
                                    <p class="text-sm">Start creating websites to see them here.</p>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Pagination -->
        @if(isset($websites) && method_exists($websites, 'links'))
        <div class="mt-6">
            {{ $websites->links() }}
        </div>
        @endif
    </div>
</div>

<!-- Website Details Modal -->
<div id="website-details-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-900">Website Details</h3>
                <button onclick="closeDetailsModal()" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div id="website-details-content">
                <!-- Details will be loaded here -->
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function refreshData() {
    window.location.reload();
}

function showDetails(websiteId) {
    // Show loading state
    document.getElementById('website-details-content').innerHTML = '<div class="text-center py-4"><i class="fas fa-spinner fa-spin text-2xl text-gray-400"></i></div>';
    document.getElementById('website-details-modal').classList.remove('hidden');
    
    // Load website details (placeholder - you would fetch real data via AJAX)
    setTimeout(() => {
        document.getElementById('website-details-content').innerHTML = `
            <div class="space-y-4">
                <div class="bg-gray-50 p-4 rounded-lg">
                    <h4 class="font-medium text-gray-900 mb-2">Creation Steps</h4>
                    <div class="space-y-2">
                        <div class="flex items-center">
                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
                            <span class="text-sm">DNS Record Created</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
                            <span class="text-sm">Virtual Server Installed</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
                            <span class="text-sm">WordPress Installed</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-clock text-yellow-500 mr-2"></i>
                            <span class="text-sm">Template Restoration In Progress</span>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 p-4 rounded-lg">
                    <h4 class="font-medium text-gray-900 mb-2">System Information</h4>
                    <div class="text-sm text-gray-600 space-y-1">
                        <p><strong>IP Address:</strong> 194.238.25.113</p>
                        <p><strong>Server:</strong> Virtualmin</p>
                        <p><strong>SSL:</strong> Enabled</p>
                        <p><strong>Backup:</strong> Daily</p>
                    </div>
                </div>
            </div>
        `;
    }, 500);
}

function closeDetailsModal() {
    document.getElementById('website-details-modal').classList.add('hidden');
}

function retryWebsite(websiteId) {
    if (confirm('Are you sure you want to retry creating this website?')) {
        // Implement retry logic
        alert('Retry functionality would be implemented here');
    }
}

// Filter functionality
document.addEventListener('DOMContentLoaded', function() {
    const filters = ['status-filter', 'template-filter', 'date-filter', 'search-filter'];
    
    filters.forEach(filterId => {
        const element = document.getElementById(filterId);
        if (element) {
            element.addEventListener('change', filterWebsites);
            if (filterId === 'search-filter') {
                element.addEventListener('input', filterWebsites);
            }
        }
    });
});

function filterWebsites() {
    // Implement client-side filtering or make AJAX request
    console.log('Filtering websites...');
}
</script>
@endpush