@extends('layouts.app')

@section('header', 'Editar Provedor')

@section('breadcrumbs')
    @php
        $breadcrumbs = [
            'Provedores' => route('ai-providers.index'),
            'Editar' => null
        ];
    @endphp
@endsection

@section('content')
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 fw-bold text-primary">Editar Provedor</h6>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('ai-providers.update', $aiProvider) }}">
                @csrf @method('PUT')
                <div class="mb-3">
                    <label for="name" class="form-label">Nome</label>
                    <input type="text" class="form-control" id="name" name="name" value="{{ old('name', $aiProvider->name) }}" required>
                    @error('name') <div class="text-danger small">{{ $message }}</div> @enderror
                </div>
                <div class="mb-3">
                    <label for="type" class="form-label">Tipo</label>
                    <select class="form-select" id="type" name="type" required>
                        <option value="">Selecione...</option>
                        <option value="openrouter" {{ old('type', $aiProvider->type) == 'openrouter' ? 'selected' : '' }}>OpenRouter</option>
                        <option value="stepfun" {{ old('type', $aiProvider->type) == 'stepfun' ? 'selected' : '' }}>StepFun</option>
                        <option value="llamacpp" {{ old('type', $aiProvider->type) == 'llamacpp' ? 'selected' : '' }}>Llama.cpp</option>
                    </select>
                    @error('type') <div class="text-danger small">{{ $message }}</div> @enderror
                </div>
                <div class="mb-3">
                    <label for="api_key" class="form-label">API Key</label>
                    <input type="password" class="form-control" id="api_key" name="api_key" value="{{ old('api_key', $aiProvider->api_key) }}" required>
                    <i class="bi bi-eye-slash" id="toggleApiKey" style="cursor:pointer; position:relative; top:-30px; left:calc(100% - 30px);"></i>
                    @error('api_key') <div class="text-danger small">{{ $message }}</div> @enderror
                </div>
                <div class="mb-3">
                    <label for="base_url" class="form-label">Base URL</label>
                    <input type="text" class="form-control" id="base_url" name="base_url" value="{{ old('base_url', $aiProvider->base_url) }}" required>
                    @error('base_url') <div class="text-danger small">{{ $message }}</div> @enderror
                </div>
                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="is_active" name="is_active" value="1" {{ old('is_active', $aiProvider->is_active) ? 'checked' : '' }}>
                    <label class="form-check-label" for="is_active">Ativo</label>
                </div>
                <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> Atualizar</button>
                <a href="{{ route('ai-providers.index') }}" class="btn btn-secondary">Cancelar</a>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
<script>
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function() {
            initApiKeyToggle();
        });
    } else {
        initApiKeyToggle();
    }

    function initApiKeyToggle() {
        const toggle = document.getElementById('toggleApiKey');
        const input = document.getElementById('api_key');
        if (toggle && input) {
            toggle.addEventListener('click', function() {
                const type = input.getAttribute('type') === 'password' ? 'text' : 'password';
                input.setAttribute('type', type);
                toggle.classList.toggle('bi-eye');
                toggle.classList.toggle('bi-eye-slash');
            });
        }
    }
</script>
@endsection