@extends('layouts.app')

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow-sm">
                <div class="card-body p-4">
                    <div class="text-center mb-4">
                        <i class="bi bi-gear-wide-connected display-4 text-primary mb-3"></i>
                        <h1 class="h3 mb-2">Proxy Auto-Configuration (PAC) File</h1>
                        <p class="text-muted">Configure your browser to automatically use our proxy servers</p>
                    </div>

                    <div class="mb-4">
                        <h2 class="h5 mb-3">What is a PAC File?</h2>
                        <p>A Proxy Auto-Configuration (PAC) file is a JavaScript file that defines how web browsers and other user agents can automatically choose the appropriate proxy server (access method) for fetching a given URL.</p>
                        <p>Our PAC file automatically selects the best proxy server from our database based on their performance scores.</p>
                    </div>

                    <div class="mb-4">
                        <h2 class="h5 mb-3">Your PAC File URL</h2>
                        <div class="card mb-4">
                            <div class="card-body">
                                <p class="mb-3">Use this URL in any browser to configure automatic proxy settings:</p>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="pacUrl" value="{{ route('pac.generate') }}" readonly>
                                    <button class="btn btn-outline-primary" type="button" onclick="copyToClipboard('pacUrl')">
                                        <i class="bi bi-clipboard"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <h2 class="h5 mb-3">How to Configure Your Browser</h2>
                        
                        <!-- Firefox Instructions -->
                        <div class="card mb-3">
                            <div class="card-header bg-light">
                                <i class="bi bi-firefox me-2"></i>Firefox
                            </div>
                            <div class="card-body">
                                <ol class="list-group list-group-numbered mb-3">
                                    <li class="list-group-item">Open Firefox Settings (Menu → Settings)</li>
                                    <li class="list-group-item">Scroll down to "Network Settings"</li>
                                    <li class="list-group-item">Click "Settings..."</li>
                                    <li class="list-group-item">Select "Automatic proxy configuration URL"</li>
                                    <li class="list-group-item">Paste the PAC URL from above</li>
                                </ol>
                            </div>
                        </div>

                        <!-- Chrome Instructions -->
                        <div class="card mb-3">
                            <div class="card-header bg-light">
                                <i class="bi bi-google-chrome me-2"></i>Chrome
                            </div>
                            <div class="card-body">
                                <ol class="list-group list-group-numbered mb-3">
                                    <li class="list-group-item">Open Chrome Settings (Menu → Settings)</li>
                                    <li class="list-group-item">Click on "Advanced" to expand settings</li>
                                    <li class="list-group-item">Under "System", click "Open your computer's proxy settings"</li>
                                    <li class="list-group-item">In Windows: Select "Automatic proxy setup" and paste the PAC URL</li>
                                    <li class="list-group-item">In macOS: Select "Automatic Proxy Configuration" and paste the PAC URL</li>
                                </ol>
                            </div>
                        </div>

                        <!-- Safari Instructions -->
                        <div class="card mb-3">
                            <div class="card-header bg-light">
                                <i class="bi bi-safari me-2"></i>Safari
                            </div>
                            <div class="card-body">
                                <ol class="list-group list-group-numbered mb-3">
                                    <li class="list-group-item">Open Safari Preferences (Safari → Preferences)</li>
                                    <li class="list-group-item">Click on "Advanced" tab</li>
                                    <li class="list-group-item">Click "Change Settings..." next to "Proxies"</li>
                                    <li class="list-group-item">Select "Automatic Proxy Configuration"</li>
                                    <li class="list-group-item">Paste the PAC URL in the field</li>
                                </ol>
                            </div>
                        </div>

                        <!-- Edge Instructions -->
                        <div class="card mb-3">
                            <div class="card-header bg-light">
                                <i class="bi bi-edge me-2"></i>Microsoft Edge
                            </div>
                            <div class="card-body">
                                <ol class="list-group list-group-numbered mb-3">
                                    <li class="list-group-item">Open Edge Settings (Menu → Settings)</li>
                                    <li class="list-group-item">Click on "System and performance"</li>
                                    <li class="list-group-item">Click "Open your computer's proxy settings"</li>
                                    <li class="list-group-item">In Windows: Select "Automatic proxy setup" and paste the PAC URL</li>
                                </ol>
                            </div>
                        </div>
                    </div>

                    <div class="mb-4">
                        <h2 class="h5 mb-3">Features of Our PAC File</h2>
                        <ul class="list-group">
                            <li class="list-group-item">
                                <i class="bi bi-check-circle-fill text-success me-2"></i>
                                Automatically selects the best performing proxy servers
                            </li>
                            <li class="list-group-item">
                                <i class="bi bi-check-circle-fill text-success me-2"></i>
                                Bypasses proxy for localhost and local network addresses
                            </li>
                            <li class="list-group-item">
                                <i class="bi bi-check-circle-fill text-success me-2"></i>
                                Updates automatically as proxy performance changes
                            </li>
                            <li class="list-group-item">
                                <i class="bi bi-check-circle-fill text-success me-2"></i>
                                Fallback to direct connection if no proxies are available
                            </li>
                        </ul>
                    </div>

                    <div class="text-center">
                        <a href="{{ route('pac.generate') }}" class="btn btn-primary">
                            <i class="bi bi-download me-2"></i>Download PAC File
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function copyToClipboard(elementId) {
    const element = document.getElementById(elementId);
    element.select();
    document.execCommand('copy');
    
    // Show feedback
    const button = element.nextElementSibling;
    const originalContent = button.innerHTML;
    button.innerHTML = '<i class="bi bi-check"></i>';
    setTimeout(() => {
        button.innerHTML = originalContent;
    }, 2000);
}
</script>
@endpush
@endsection