@extends('adminlte::page')

@section('title', 'Editar Instalação')

@section('css')
    <link rel="stylesheet" href="{{ asset('css/adminlte-inter.css') }}">
    <style>
        /* Garantir que a fonte Inter seja aplicada imediatamente */
        * {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
        }
    </style>
@stop

@section('content_header')
    <h1>Editar Instalação</h1>
@stop

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Editar Instalação: {{ $instalacao->nome }}</h3>
                </div>
                <div class="card-body">
                    @if($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('instalacoes.web.update', $instalacao) }}" method="POST">
                        @csrf
                        @method('PUT')
                        
                        <!-- Informações Básicas -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="nome">Nome da Instalação *</label>
                                    <input type="text" class="form-control @error('nome') is-invalid @enderror" 
                                           id="nome" name="nome" value="{{ old('nome', $instalacao->nome) }}" 
                                           placeholder="Ex: Empresa do Cliente" required>
                                    <small class="form-text text-muted">Título da instalação (Ex: Nome da empresa do cliente)</small>
                                    @error('nome')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="slug">Slug/Subdomínio *</label>
                                    <input type="text" class="form-control @error('slug') is-invalid @enderror" 
                                           id="slug" name="slug" value="{{ old('slug', $instalacao->slug) }}" 
                                           placeholder="Ex: teste1" required>
                                    <small class="form-text text-muted">Será o subdomínio: <span id="slug-preview">{{ $instalacao->slug }}.waygest.com.br</span></small>
                                    @error('slug')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Cores -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="cor1">Cor Primária *</label>
                                    <div class="input-group">
                                        <input type="color" class="form-control @error('cor1') is-invalid @enderror" 
                                               id="cor1" name="cor1" value="{{ old('cor1', $instalacao->cor1 ?? '#007bff') }}" required>
                                        <input type="text" class="form-control @error('cor1') is-invalid @enderror" 
                                               id="cor1_hex" value="{{ old('cor1', $instalacao->cor1 ?? '#007bff') }}" 
                                               placeholder="#007bff" pattern="^#[0-9A-Fa-f]{6}$">
                                    </div>
                                    <small class="form-text text-muted">Cor principal da instalação</small>
                                    @error('cor1')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="cor2">Cor Secundária *</label>
                                    <div class="input-group">
                                        <input type="color" class="form-control @error('cor2') is-invalid @enderror" 
                                               id="cor2" name="cor2" value="{{ old('cor2', $instalacao->cor2 ?? '#6c757d') }}" required>
                                        <input type="text" class="form-control @error('cor2') is-invalid @enderror" 
                                               id="cor2_hex" value="{{ old('cor2', $instalacao->cor2 ?? '#6c757d') }}" 
                                               placeholder="#6c757d" pattern="^#[0-9A-Fa-f]{6}$">
                                    </div>
                                    <small class="form-text text-muted">Cor secundária da instalação</small>
                                    @error('cor2')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Status e Versão -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="status">Status *</label>
                                    <select class="form-control @error('status') is-invalid @enderror" 
                                            id="status" name="status" required>
                                        <option value="ativa" {{ old('status', $instalacao->status) === 'ativa' ? 'selected' : '' }}>Ativa</option>
                                        <option value="inativa" {{ old('status', $instalacao->status) === 'inativa' ? 'selected' : '' }}>Inativa</option>
                                        <option value="manutencao" {{ old('status', $instalacao->status) === 'manutencao' ? 'selected' : '' }}>Manutenção</option>
                                        <option value="erro" {{ old('status', $instalacao->status) === 'erro' ? 'selected' : '' }}>Erro</option>
                                    </select>
                                    @error('status')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="versao">Versão</label>
                                    <input type="text" class="form-control @error('versao') is-invalid @enderror" 
                                           id="versao" name="versao" value="{{ old('versao', $instalacao->versao) }}">
                                    @error('versao')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Configurações Avançadas (Opcionais) -->
                        <div class="card mt-3">
                            <div class="card-header">
                                <h5 class="card-title">Configurações Avançadas (Opcionais)</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="database_name">Nome do Banco</label>
                                            <input type="text" class="form-control @error('database_name') is-invalid @enderror" 
                                                   id="database_name" name="database_name" value="{{ old('database_name', $instalacao->database_name) }}">
                                            <small class="form-text text-muted">Deixe vazio para usar: waygest_<span id="db-name-preview">{{ $instalacao->slug }}</span></small>
                                            @error('database_name')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="database_username">Usuário do Banco</label>
                                            <input type="text" class="form-control @error('database_username') is-invalid @enderror" 
                                                   id="database_username" name="database_username" value="{{ old('database_username', $instalacao->database_username) }}">
                                            @error('database_username')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="database_password">Senha do Banco</label>
                                            <input type="password" class="form-control @error('database_password') is-invalid @enderror" 
                                                   id="database_password" name="database_password" value="{{ old('database_password', $instalacao->database_password) }}">
                                            @error('database_password')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group mt-3">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Salvar Alterações
                            </button>
                            <a href="{{ route('instalacoes.web.show', $instalacao) }}" class="btn btn-info">
                                <i class="fas fa-eye"></i> Ver Detalhes
                            </a>
                            <a href="{{ route('instalacoes.web.index') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Voltar
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@stop

@section('js')
<script>
    // Sincronizar color picker com input de texto
    document.getElementById('cor1').addEventListener('input', function() {
        document.getElementById('cor1_hex').value = this.value;
    });
    
    document.getElementById('cor1_hex').addEventListener('input', function() {
        if (this.value.match(/^#[0-9A-Fa-f]{6}$/)) {
            document.getElementById('cor1').value = this.value;
        }
    });
    
    document.getElementById('cor2').addEventListener('input', function() {
        document.getElementById('cor2_hex').value = this.value;
    });
    
    document.getElementById('cor2_hex').addEventListener('input', function() {
        if (this.value.match(/^#[0-9A-Fa-f]{6}$/)) {
            document.getElementById('cor2').value = this.value;
        }
    });

    // Atualizar preview do slug
    document.getElementById('slug').addEventListener('input', function() {
        const slug = this.value || '{{ $instalacao->slug }}';
        document.getElementById('slug-preview').textContent = slug + '.waygest.com.br';
        document.getElementById('db-name-preview').textContent = slug;
    });
</script>
@stop