@extends('layouts.admin')

@section('content')
<div class="w-full max-w-3xl mx-auto px-4 py-8">

    <header class="mb-10">
        <div class="flex items-center gap-3 mb-2">
            <span class="w-8 h-[2px] bg-[#06458F]"></span>
            <span class="text-[#06458F] font-bold text-[10px] uppercase tracking-[0.4em]">Sistema</span>
        </div>
        <h1 class="text-4xl font-bold text-slate-800 italic tracking-tighter uppercase">Configurações <span class="text-[#06458F]">da Empresa</span></h1>
        <p class="text-slate-500 font-medium mt-1">Dados institucionais e bancários injetados nos documentos PDF e proformas.</p>
    </header>

    @if(session('success'))
        <div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-2xl text-green-700 text-sm font-bold flex items-center gap-2">
            <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
            {{ session('success') }}
        </div>
    @endif

    @if($errors->any())
        <div class="mb-6 p-4 bg-blue-50 border-l-4 border-[#06458F] rounded-r-2xl">
            @foreach($errors->all() as $error)
                <p class="text-[#06458F] text-sm font-bold">• {{ $error }}</p>
            @endforeach
        </div>
    @endif

    <form action="{{ route('admin.configuracoes.update') }}" method="POST" enctype="multipart/form-data"
          class="bg-white border border-slate-200 p-8 md:p-10 rounded-[2.5rem] shadow-sm space-y-8">
        @csrf
        @method('PUT')

        {{-- DADOS INSTITUCIONAIS --}}
        <div>
            <p class="text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400 mb-5 flex items-center gap-3">
                Dados Institucionais <span class="flex-1 h-px bg-slate-100"></span>
            </p>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div class="md:col-span-2">
                    <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-2 ml-1">Nome da Empresa</label>
                    <input type="text" name="nome_empresa" value="{{ old('nome_empresa', $config->nome_empresa) }}" required
                        class="w-full bg-slate-50 border-2 border-slate-200 px-5 py-4 rounded-2xl focus:border-[#06458F] focus:bg-white outline-none transition-all text-slate-900 font-bold">
                </div>
                <div>
                    <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-2 ml-1">NIF</label>
                    <input type="text" name="nif" value="{{ old('nif', $config->nif) }}" required
                        class="w-full bg-slate-50 border-2 border-slate-200 px-5 py-4 rounded-2xl focus:border-[#06458F] focus:bg-white outline-none transition-all text-slate-900 font-bold">
                </div>
                <div>
                    <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-2 ml-1">Telefone</label>
                    <input type="text" name="telefone" value="{{ old('telefone', $config->telefone) }}"
                        class="w-full bg-slate-50 border-2 border-slate-200 px-5 py-4 rounded-2xl focus:border-[#06458F] focus:bg-white outline-none transition-all text-slate-900 font-bold">
                </div>
                <div>
                    <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-2 ml-1">Email</label>
                    <input type="email" name="email" value="{{ old('email', $config->email) }}"
                        class="w-full bg-slate-50 border-2 border-slate-200 px-5 py-4 rounded-2xl focus:border-[#06458F] focus:bg-white outline-none transition-all text-slate-900 font-bold">
                </div>
                <div>
                    <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-2 ml-1">Morada</label>
                    <input type="text" name="morada" value="{{ old('morada', $config->morada) }}"
                        class="w-full bg-slate-50 border-2 border-slate-200 px-5 py-4 rounded-2xl focus:border-[#06458F] focus:bg-white outline-none transition-all text-slate-900 font-bold">
                </div>
            </div>
        </div>

        {{-- COORDENADAS BANCÁRIAS --}}
        <div>
            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-1 mb-5">
                <p class="text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400 flex items-center gap-3 flex-1">
                    Coordenadas Bancárias <span class="flex-1 h-px bg-slate-100 hidden sm:block"></span>
                </p>
                <span class="text-[10px] text-slate-400 font-normal italic">Deixe vazio se a empresa ainda não tiver contas ativas</span>
            </div>
            <div class="space-y-5">
                <div>
                    <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-2 ml-1">Titular da Conta</label>
                    <input type="text" name="titular_bancario" value="{{ old('titular_bancario', $config->titular_bancario) }}"
                        placeholder="Nome oficial da empresa ou titular registado no banco"
                        class="w-full bg-slate-50 border-2 border-slate-200 px-5 py-4 rounded-2xl focus:border-[#06458F] focus:bg-white outline-none transition-all text-slate-900 font-bold placeholder:text-slate-400">
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div>
                        <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-2 ml-1">IBAN — Banco BAI</label>
                        <input type="text" name="iban_bai" value="{{ old('iban_bai', $config->iban_bai) }}"
                            placeholder="AO06 0040.0000.XXXX.XXXX.XXXX.X"
                            class="w-full bg-slate-50 border-2 border-slate-200 px-5 py-4 rounded-2xl focus:border-[#06458F] focus:bg-white outline-none transition-all text-slate-900 font-bold font-mono placeholder:text-slate-400">
                    </div>
                    <div>
                        <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-2 ml-1">IBAN — Banco BFA</label>
                        <input type="text" name="iban_bfa" value="{{ old('iban_bfa', $config->iban_bfa) }}"
                            placeholder="AO06 0006.0000.XXXX.XXXX.XXXX.X"
                            class="w-full bg-slate-50 border-2 border-slate-200 px-5 py-4 rounded-2xl focus:border-[#06458F] focus:bg-white outline-none transition-all text-slate-900 font-bold font-mono placeholder:text-slate-400">
                    </div>
                </div>
            </div>
        </div>

        {{-- CONFIGURAÇÕES DE SEO & GOOGLE ANALYTICS --}}
        <div>
            <p class="text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400 mb-5 flex items-center gap-3">
                SEO & Google Analytics <span class="flex-1 h-px bg-slate-100"></span>
            </p>
            <div class="space-y-5">
                <div>
                    <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-2 ml-1">Meta Descrição (SEO)</label>
                    <textarea name="meta_description" rows="3" placeholder="Descrição resumida do site para os motores de busca (máx. 160 caracteres recomendados)"
                        class="w-full bg-slate-50 border-2 border-slate-200 px-5 py-4 rounded-2xl focus:border-[#06458F] focus:bg-white outline-none transition-all text-slate-900 font-bold placeholder:text-slate-400 resize-none">{{ old('meta_description', $config->meta_description) }}</textarea>
                </div>
                <div>
                    <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-2 ml-1">Meta Keywords (Palavras-Chave separadas por vírgula)</label>
                    <input type="text" name="meta_keywords" value="{{ old('meta_keywords', $config->meta_keywords) }}"
                        placeholder="topografia, cartografia, agrimensura, angola"
                        class="w-full bg-slate-50 border-2 border-slate-200 px-5 py-4 rounded-2xl focus:border-[#06458F] focus:bg-white outline-none transition-all text-slate-900 font-bold placeholder:text-slate-400">
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div>
                        <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-2 ml-1">Google Analytics ID (GA4)</label>
                        <input type="text" name="google_analytics_id" value="{{ old('google_analytics_id', $config->google_analytics_id) }}"
                            placeholder="G-XXXXXXXXXX"
                            class="w-full bg-slate-50 border-2 border-slate-200 px-5 py-4 rounded-2xl focus:border-[#06458F] focus:bg-white outline-none transition-all text-slate-900 font-bold placeholder:text-slate-400">
                    </div>
                    <div>
                        <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-2 ml-1">Google Site Verification Token</label>
                        <input type="text" name="google_site_verification" value="{{ old('google_site_verification', $config->google_site_verification) }}"
                            placeholder="google-site-verification token..."
                            class="w-full bg-slate-50 border-2 border-slate-200 px-5 py-4 rounded-2xl focus:border-[#06458F] focus:bg-white outline-none transition-all text-slate-900 font-bold placeholder:text-slate-400">
                    </div>
                </div>
            </div>
        </div>

        {{-- LOGÓTIPO DOS DOCUMENTOS --}}
        <div>
            <p class="text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400 mb-5 flex items-center gap-3">
                Logótipo para Documentos PDF <span class="flex-1 h-px bg-slate-100"></span>
            </p>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
                @if($config->logo_documentos)
                    <div class="bg-slate-50 border border-slate-200 rounded-2xl p-4 flex flex-col items-center gap-2">
                        <img src="{{ asset('storage/' . $config->logo_documentos) }}" alt="Logo atual" class="h-16 w-auto object-contain">
                        <span class="text-[9px] font-bold text-slate-400 uppercase tracking-widest">Logo Atual</span>
                    </div>
                @else
                    <div class="bg-slate-50 border border-slate-200 rounded-2xl p-4 flex flex-col items-center gap-2">
                        <img src="{{ asset('Logo.png') }}" alt="Logo padrão" class="h-16 w-auto object-contain opacity-60">
                        <span class="text-[9px] font-bold text-slate-400 uppercase tracking-widest">Logo Padrão (Logo.png)</span>
                    </div>
                @endif
                <div class="group relative w-full bg-slate-50 border-2 border-dashed border-slate-300 p-8 rounded-3xl text-center hover:border-[#06458F] hover:bg-white transition-all cursor-pointer">
                    <input type="file" name="logo_documentos" accept="image/*" class="absolute inset-0 opacity-0 cursor-pointer">
                    <svg class="w-8 h-8 text-slate-400 mx-auto mb-2 group-hover:text-[#06458F] transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                    </svg>
                    <p class="text-xs font-bold text-slate-500 uppercase tracking-wider">Substituir Logo</p>
                    <p class="text-[9px] text-slate-400 mt-1">JPEG, PNG ou WebP — Máx. 2MB</p>
                </div>
            </div>
        </div>

        <div class="flex gap-4 pt-4 border-t border-slate-100">
            <button type="submit"
                class="flex-[2] bg-[#06458F] hover:bg-[#052C56] text-white font-bold py-5 px-8 rounded-2xl shadow-md transition-all active:scale-[0.98] uppercase tracking-[0.1em] text-xs cursor-pointer">
                Guardar Configurações
            </button>
            <a href="{{ route('admin.dashboard') }}"
               class="flex-1 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold py-5 px-8 rounded-2xl transition-all text-center uppercase tracking-[0.1em] text-xs cursor-pointer">
                Cancelar
            </a>
        </div>
    </form>
</div>
@endsection