@extends('layouts.app')

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <div>
                            <h2 class="h4 mb-1">Free Proxies</h2>
                            <p class="text-muted mb-0">List of available proxies sorted by reliability score</p>
                        </div>
                        <div class="text-end">
                            <span class="badge bg-primary">{{ $proxies->total() }} proxies</span>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-hover align-middle">
                            <thead>
                                <tr>
                                    <th>Proxy</th>
                                    <th>Protocol</th>
                                    <th>Location</th>
                                    <th>Anonymity</th>
                                    <th>HTTPS</th>
                                    <th>Score</th>
                                    <th>Last Tested</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($proxies as $proxy)
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <i class="bi bi-globe me-2"></i>
                                            <div>
                                                <div class="fw-bold">{{ $proxy->ip }}</div>
                                                <small class="text-muted">Port: {{ $proxy->port }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge bg-secondary">{{ strtoupper($proxy->protocol) }}</span>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <i class="bi bi-geo-alt me-2"></i>
                                            <div>
                                                <div>{{ $proxy->city }}</div>
                                                <small class="text-muted">{{ $proxy->country }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge bg-info">{{ ucfirst($proxy->anonymity) }}</span>
                                    </td>
                                    <td>
                                        @if($proxy->https)
                                            <span class="badge bg-success">Yes</span>
                                        @else
                                            <span class="badge bg-danger">No</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="progress flex-grow-1 me-2" style="height: 6px;">
                                                <div class="progress-bar {{ $proxy->score >= 80 ? 'bg-success' : ($proxy->score >= 50 ? 'bg-warning' : 'bg-danger') }}" 
                                                     role="progressbar" 
                                                     style="width: {{ $proxy->score }}%"
                                                     aria-valuenow="{{ $proxy->score }}" 
                                                     aria-valuemin="0" 
                                                     aria-valuemax="100">
                                                </div>
                                            </div>
                                            <span class="fw-bold">{{ $proxy->score }}%</span>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <i class="bi bi-clock me-2"></i>
                                            <div>
                                                @if($proxy->last_tested_at)
                                                    <div>{{ $proxy->last_tested_at->diffForHumans() }}</div>
                                                    <small class="text-muted">{{ $proxy->last_tested_at->format('M d, Y H:i') }}</small>
                                                @else
                                                    <div class="text-muted">Never tested</div>
                                                    <small class="text-muted">-</small>
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-sm btn-outline-primary" 
                                                    onclick="copyToClipboard('{{ $proxy->proxy }}')">
                                                <i class="bi bi-clipboard"></i>
                                            </button>
                                            <a href="http://{{ $proxy->proxy }}" target="_blank" 
                                               class="btn btn-sm btn-outline-secondary">
                                                <i class="bi bi-box-arrow-up-right"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="8" class="text-center py-4">
                                        <div class="text-muted">
                                            <i class="bi bi-inbox me-2"></i>No proxies available at the moment
                                        </div>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div class="d-flex justify-content-center mt-4">
                        {{ $proxies->links('vendor.pagination.bootstrap-5') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(() => {
        // Show a temporary success message
        const btn = event.currentTarget;
        const originalContent = btn.innerHTML;
        btn.innerHTML = '<i class="bi bi-check"></i>';
        btn.classList.remove('btn-outline-primary');
        btn.classList.add('btn-success');
        
        setTimeout(() => {
            btn.innerHTML = originalContent;
            btn.classList.remove('btn-success');
            btn.classList.add('btn-outline-primary');
        }, 2000);
    });
}
</script>
@endpush
@endsection