@extends('layouts.app')

@section('title', 'Control Servicii')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold text-dark mb-1">Control Servicii & Aplicații</h2>
            <p class="text-muted small mb-0">Gestionează accesul la servicii specifice pentru rețeaua ta.</p>
        </div>
        <div class="d-flex gap-2">
            <button class="btn btn-outline-danger btn-sm" onclick="blockAll()">
                <i class="bi bi-shield-lock-fill me-1"></i> Blochează Tot
            </button>
            <button class="btn btn-outline-success btn-sm" onclick="unblockAll()">
                <i class="bi bi-shield-check me-1"></i> Deblochează Tot
            </button>
        </div>
    </div>

    <!-- Alert Area -->
    <div id="alertContainer"></div>

    @if(empty($availableServices))
        <div class="alert alert-warning">
            <i class="bi bi-exclamation-triangle me-2"></i> Nu s-a putut încărca lista de servicii de la AdGuard.
        </div>
    @else 
        @foreach($availableServices as $category => $services)
            <div class="card mb-4 border-0 shadow-sm">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="fw-bold mb-0 text-primary">{{ ucfirst($category) }}</h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        @foreach($services as $serviceId => $serviceName)
                            <div class="col-md-6 col-lg-4 col-xl-3">
                                <div class="d-flex align-items-center justify-content-between p-3 rounded-3 border bg-light h-100 hover-shadow transition-all">
                                    <div class="d-flex align-items-center overflow-hidden">
                                        <!-- Icon placeholder based on service name first letter -->
                                        <div class="rounded-circle bg-white border d-flex align-items-center justify-content-center me-3 flex-shrink-0" style="width: 40px; height: 40px;">
                                            <span class="fw-bold text-secondary">{{ substr($serviceName, 0, 1) }}</span>
                                        </div>
                                        <div class="overflow-hidden">
                                            <div class="fw-bold text-dark text-truncate" title="{{ $serviceName }}">{{ $serviceName }}</div>
                                            <small class="text-muted d-block text-truncate" style="font-size: 0.75rem;">{{ $serviceId }}</small>
                                        </div>
                                    </div>
                                    <div class="form-check form-switch ms-2">
                                        <input class="form-check-input service-toggle" type="checkbox" 
                                               data-service="{{ $serviceId }}" 
                                               id="toggle_{{ $serviceId }}" 
                                               style="width: 3rem; height: 1.5rem; cursor: pointer;"
                                               {{ in_array($serviceId, $blockedServices) ? 'checked' : '' }}>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endforeach
    @endif
</div>

@push('scripts')
<script>
    const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

    // Toggle single service
    document.querySelectorAll('.service-toggle').forEach(toggle => {
        toggle.addEventListener('change', function() {
            const service = this.dataset.service;
            const enabled = this.checked; // Checked = Blocked
            
            updateService(service, enabled, this);
        });
    });

    function updateService(service, enabled, element) {
        // Disable input while processing
        if(element) element.disabled = true;

        fetch('{{ route("dashboard.toggle-service") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            },
            body: JSON.stringify({ service: service, enabled: enabled })
        })
        .then(response => {
            if (!response.ok) throw new Error('Network response was not ok');
            return response.json();
        })
        .then(data => {
            if (data.success) {
                showAlert('success', `Serviciul <strong>${service}</strong> a fost ${enabled ? 'blocat' : 'deblocat'}.`);
            } else {
                throw new Error(data.error || 'Unknown error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('danger', 'Eroare la actualizarea serviciului: ' + error.message);
            // Revert state on error if element exists
            if(element) element.checked = !enabled;
        })
        .finally(() => {
            if(element) element.disabled = false;
        });
    }

    function blockAll() {
        if(!confirm('Sigur vrei să blochezi TOATE serviciile listate aici?')) return;
        // This would ideally be a batch API call, but for now we can iterate visible toggles
        // Note: For large lists, a specific backend endpoint is better.
        alert('Funcționalitate în lucru. Te rog să blochezi manual momentan.');
    }

    function unblockAll() {
        if(!confirm('Sigur vrei să deblochezi TOATE serviciile?')) return;
        alert('Funcționalitate în lucru. Te rog să deblochezi manual momentan.');
    }

    function showAlert(type, message) {
        const container = document.getElementById('alertContainer');
        const alertHtml = `
            <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        `;
        container.innerHTML = alertHtml;
        
        // Auto dismiss after 3s
        setTimeout(() => {
            const alert = container.querySelector('.alert');
            if(alert) {
                const bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            }
        }, 3000);
    }
</script>

<style>
    .hover-shadow:hover {
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
        transform: translateY(-2px);
    }
    .transition-all {
        transition: all 0.2s ease-in-out;
    }
</style>
@endpush
@endsection