@extends('layouts.app')

@section('css')
<style>
    .config-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 32px;
        border-radius: 16px 16px 0 0;
    }
    
    .config-card {
        border-radius: 16px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.1);
        border: none;
    }
    
    .btn-save {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 12px 32px;
        border-radius: 8px;
        font-weight: 600;
        border: none;
        transition: all 0.3s ease;
    }
    
    .btn-save:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
        color: white;
    }
    
    .btn-test {
        background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
        color: white;
        padding: 12px 32px;
        border-radius: 8px;
        font-weight: 600;
        border: none;
        transition: all 0.3s ease;
    }
    
    .btn-test:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(17, 153, 142, 0.4);
        color: white;
    }
    
    .btn-boletos {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        color: white;
        padding: 12px 32px;
        border-radius: 8px;
        font-weight: 600;
        border: none;
        transition: all 0.3s ease;
    }
    
    .btn-boletos:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(79, 172, 254, 0.4);
        color: white;
    }
</style>
@endsection

@section('content')
<div class="container-fluid">
    
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h2 class="mb-1" style="font-weight: 800; color: #2d3748;">
                        <i class="fas fa-cog text-primary"></i> Configuração Sicoob
                    </h2>
                    <p class="text-muted mb-0">Configure a integração com a API do Sicoob</p>
                </div>
                <div>
                    <a href="{{ route('sicoob.boletos') }}" class="btn btn-boletos">
                        <i class="fas fa-file-invoice-dollar"></i> Ver Boletos
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Config Card -->
    <div class="card config-card">
        <div class="config-header">
            <h4 class="mb-1" style="font-weight: 700;">
                <i class="fas fa-plug"></i> Integração API Sicoob
            </h4>
            <p class="mb-0" style="opacity: 0.9;">Preencha os dados fornecidos pelo Sicoob para ativar a integração</p>
        </div>
        
        <div class="card-body p-4">
            <!-- Alerts -->
            @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="fas fa-check-circle"></i> {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
            @endif
            
            @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
            @endif
            
            @if($errors->any())
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="fas fa-exclamation-triangle"></i> <strong>Erros encontrados:</strong>
                <ul class="mb-0 mt-2">
                    @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
            @endif

            <!-- Form -->
            <form method="post" action="{{ route('sicoob.config.save') }}" enctype="multipart/form-data">
                @csrf
                @include('sicoob._form')
                
                <!-- Actions -->
                <div class="mt-4 pt-4 border-top">
                    <div class="d-flex gap-3">
                        <button type="submit" class="btn btn-save">
                            <i class="fas fa-save"></i> Salvar Configuração
                        </button>
                        <button type="button" onclick="document.getElementById('testForm').submit();" class="btn btn-test">
                            <i class="fas fa-plug"></i> Testar Conexão
                        </button>
                    </div>
                </div>
            </form>
            
            <form id="testForm" method="post" action="{{ route('sicoob.config.test') }}">@csrf</form>
        </div>
    </div>
    
    <!-- Help Card -->

</div>
@endsection

@section('js')
<script>
document.addEventListener('DOMContentLoaded', function(){
    var certInput = document.getElementById('sicoob_cert_file');
    var certSelected = document.getElementById('sicoob_cert_selected');
    
    if(certInput && certSelected){
        certInput.addEventListener('change', function(){
            var f = (this.files && this.files.length) ? this.files[0] : null;
            if(f) {
                certSelected.innerHTML = '<i class="fas fa-check text-success"></i> Selecionado: <strong>' + f.name + '</strong>';
            } else {
                certSelected.textContent = '';
            }
        });
    }
});
</script>
@endsection