@extends('layouts.app')

@section('title', 'Configurações do YouTube - Link na Bio')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Configurações do YouTube') }}</div>

                <div class="card-body">
                    <form method="POST" action="{{ route('admin.youtube.update') }}">
                        @csrf
                        @method('PUT')

                        <div class="mb-3">
                            <label for="channel_id" class="form-label">{{ __('ID do Canal') }}</label>
                            <input id="channel_id" type="text" class="form-control @error('channel_id') is-invalid @enderror" name="channel_id" value="{{ old('channel_id', $settings->channel_id ?? '') }}" required>
                            <div class="form-text">
                                O ID do seu canal do YouTube. Você pode encontrá-lo na URL do seu canal após "channel/".
                            </div>
                            @error('channel_id')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="api_key" class="form-label">{{ __('Chave da API') }}</label>
                            <input id="api_key" type="text" class="form-control @error('api_key') is-invalid @enderror" name="api_key" value="{{ old('api_key', $settings->api_key ?? '') }}" required>
                            <div class="form-text">
                                Sua chave da API do YouTube. Você pode obtê-la no <a href="https://console.developers.google.com/" target="_blank">Google Developer Console</a>.
                            </div>
                            @error('api_key')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <button type="button" id="test-connection" class="btn btn-outline-info">
                                <i class="fas fa-sync"></i> Testar Conexão
                            </button>
                            <div id="connection-result" class="mt-2"></div>
                        </div>

                        <div class="mb-3">
                            <label for="video_count" class="form-label">{{ __('Quantidade de Vídeos') }}</label>
                            <input id="video_count" type="number" class="form-control @error('video_count') is-invalid @enderror" name="video_count" value="{{ old('video_count', $settings->video_count ?? 1) }}" min="1" max="10" required>
                            <div class="form-text">
                                Quantidade de vídeos a serem exibidos na sua página (máximo 10).
                            </div>
                            @error('video_count')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="display_size" class="form-label">{{ __('Tamanho de Exibição') }}</label>
                            <select id="display_size" class="form-select @error('display_size') is-invalid @enderror" name="display_size" required>
                                <option value="small" {{ (old('display_size', $settings->display_size ?? '') == 'small') ? 'selected' : '' }}>Pequeno</option>
                                <option value="medium" {{ (old('display_size', $settings->display_size ?? 'medium') == 'medium') ? 'selected' : '' }}>Médio</option>
                                <option value="large" {{ (old('display_size', $settings->display_size ?? '') == 'large') ? 'selected' : '' }}>Grande</option>
                            </select>
                            @error('display_size')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>

                        <div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" id="show_latest_live" name="show_latest_live" value="1" {{ old('show_latest_live', $settings->show_latest_live ?? false) ? 'checked' : '' }}>
                            <label class="form-check-label" for="show_latest_live">{{ __('Mostrar última live em vez do último vídeo') }}</label>
                        </div>

                        <div class="d-flex justify-content-between">
                            <a href="{{ route('admin.dashboard') }}" class="btn btn-secondary">
                                {{ __('Cancelar') }}
                            </a>
                            <button type="submit" class="btn btn-primary">
                                {{ __('Salvar') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const testButton = document.getElementById('test-connection');
        const resultDiv = document.getElementById('connection-result');
        const channelIdInput = document.getElementById('channel_id');
        const apiKeyInput = document.getElementById('api_key');
        
        testButton.addEventListener('click', function() {
            const channelId = channelIdInput.value.trim();
            const apiKey = apiKeyInput.value.trim();
            
            if (!channelId || !apiKey) {
                resultDiv.innerHTML = '<div class="alert alert-warning">Por favor, preencha o ID do canal e a chave da API.</div>';
                return;
            }
            
            resultDiv.innerHTML = '<div class="alert alert-info">Testando conexão...</div>';
            
            fetch('{{ route("admin.youtube.test-connection") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ channel_id: channelId, api_key: apiKey })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    resultDiv.innerHTML = `<div class="alert alert-success">${data.message}</div>`;
                } else {
                    resultDiv.innerHTML = `<div class="alert alert-danger">${data.message}</div>`;
                }
            })
            .catch(error => {
                resultDiv.innerHTML = '<div class="alert alert-danger">Erro ao testar conexão. Verifique sua conexão com a internet.</div>';
                console.error('Erro:', error);
            });
        });
    });
</script>
@endsection