@extends('layouts.app')

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

@section('breadcrumbs')
    @php
        $breadcrumbs = [
            'Provedores' => route('ai-providers.index'),
            'Novo' => 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">Cadastrar Provedor</h6>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('ai-providers.store') }}">
                @csrf
                <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') }}" required>
                    @error('name') <div class="text-danger small">{{ $message }}</div> @enderror
                </div>
                <div class="mb-3">
                    <label for="slug" class="form-label">Slug</label>
                    <input type="text" class="form-control" id="slug" name="slug" value="{{ old('slug') }}" required>
                    @error('slug') <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') == 'openrouter' ? 'selected' : '' }}>OpenRouter</option>
                        <option value="stepfun" {{ old('type') == 'stepfun' ? 'selected' : '' }}>StepFun</option>
                        <option value="llamacpp" {{ old('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') }}" 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') }}" 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', true) ? '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> Salvar</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();
            initSlugGenerator();
        });
    } else {
        initApiKeyToggle();
        initSlugGenerator();
    }

    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');
            });
        }
    }

    function initSlugGenerator() {
        const nameInput = document.getElementById('name');
        const slugInput = document.getElementById('slug');
        if (nameInput && slugInput) {
            nameInput.addEventListener('input', function() {
                slugInput.value = this.value.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
            });
        }
    }
</script>
@endsection