@extends('layouts.app', ['title' => 'Configuração da Empresa'])
@section('css')
<style>
/* ===== CONFIG PAGE ===== */
.cfg-wrap { max-width: 1200px; margin: 0 auto; padding: 24px 16px; }

.cfg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cfg-header h4 { font-size: 22px; font-weight: 700; margin: 0; }
.cfg-header p  { font-size: 13px; opacity: 0.6; margin: 4px 0 0; }

/* Tabs */
.cfg-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; }
.cfg-tabs .nav-link {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 10px; font-size: 13px; font-weight: 600;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.6) !important;
    transition: all 0.2s;
}
.cfg-tabs .nav-link:hover { background: rgba(255,255,255,0.1); color: #fff !important; }
.cfg-tabs .nav-link.active {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(59,130,246,0.35);
}
.cfg-tabs .nav-link i { font-size: 16px; }

/* Section cards */
.cfg-section {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 20px;
}
.cfg-section-title {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: #60a5fa;
    margin-bottom: 18px; padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex; align-items: center; gap: 8px;
}

/* Form controls */
.cfg-wrap .form-label { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; }
.cfg-wrap .form-control,
.cfg-wrap .form-select {
    background: rgba(0,0,0,0.25) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: 14px;
    padding: 10px 14px;
    transition: all 0.2s;
}
.cfg-wrap .form-control:focus,
.cfg-wrap .form-select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.2) !important;
    background: rgba(0,0,0,0.35) !important;
}
.cfg-wrap .form-control::placeholder { color: rgba(255,255,255,0.25) !important; }
.cfg-wrap .input-group-text {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.6) !important;
    border-radius: 8px 0 0 8px !important;
}

/* Logo upload */
.logo-upload-area {
    border: 2px dashed rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.logo-upload-area:hover { border-color: #3b82f6; background: rgba(59,130,246,0.05); }
.logo-upload-area img { max-height: 90px; border-radius: 8px; margin-bottom: 10px; }
.logo-upload-area .upload-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: #60a5fa; cursor: pointer; font-weight: 600;
}
.logo-upload-area input[type="file"] { display: none; }

/* Cert info */
.cert-info-card {
    background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.2);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 16px;
}
.cert-info-card .cert-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.cert-info-card .cert-row span:first-child { color: rgba(255,255,255,0.5); }
.cert-info-card .cert-row strong { color: #6ee7b7; }

.cert-expired {
    background: rgba(239,68,68,0.08);
    border-color: rgba(239,68,68,0.2);
}
.cert-expired strong { color: #fca5a5 !important; }

/* File upload button */
.file-upload-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px; border-radius: 8px; font-size: 13px; font-weight: 600;
    background: rgba(255,255,255,0.06); border: 1px dashed rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.7); cursor: pointer; transition: all 0.2s; width: 100%;
}
.file-upload-btn:hover { background: rgba(59,130,246,0.1); border-color: #3b82f6; color: #60a5fa; }

/* Save bar */
.cfg-save-bar {
    position: sticky; bottom: 0;
    background: rgba(15,23,42,0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 14px 24px;
    display: flex; justify-content: flex-end; gap: 10px;
    margin: 0 -16px -24px;
    border-radius: 0 0 14px 14px;
}

/* Select2 dark */
.cfg-wrap .select2-container--default .select2-selection--single {
    background: rgba(0,0,0,0.25) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 8px !important;
    height: 42px !important;
    display: flex !important; align-items: center !important;
}
.cfg-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #e2e8f0 !important; padding-left: 14px !important; line-height: 42px !important;
}

/* ===== Sidebar BG Picker ===== */
.sidebar-bg-picker{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.sbg-option{
    width:88px;height:60px;border-radius:12px;cursor:pointer;position:relative;
    border:2px solid transparent;transition:transform .15s,box-shadow .15s,border-color .15s;
    display:flex;align-items:flex-end;justify-content:center;
    padding-bottom:6px;overflow:hidden;user-select:none;
}
.sbg-option *{pointer-events:none;user-select:none}
.sbg-option:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.4)}
.sbg-option.active{border-color:#3b82f6 !important;box-shadow:0 0 0 3px rgba(59,130,246,.4)}
.sbg-option.active::after{
    content:"✓";position:absolute;top:5px;right:7px;
    font-size:11px;color:#fff;font-weight:800;
    text-shadow:0 1px 4px rgba(0,0,0,.8);
}
.sbg-label{
    font-size:10px;font-weight:700;color:#fff;
    text-shadow:0 1px 4px rgba(0,0,0,.9);
    letter-spacing:.3px;line-height:1;
}
.sbg-none{background:rgba(255,255,255,.06);border:2px dashed rgba(255,255,255,.2)!important}
.sbg-none .sbg-label{color:rgba(255,255,255,.55);text-shadow:none}
.sbg-aurora  {background:linear-gradient(135deg,#0f0c29,#302b63,#24243e)}
.sbg-ocean   {background:linear-gradient(135deg,#0575e6,#021b79)}
.sbg-sunset  {background:linear-gradient(135deg,#f7971e,#ffd200,#ff4e50)}
.sbg-forest  {background:linear-gradient(135deg,#134e5e,#71b280)}
.sbg-candy   {background:linear-gradient(135deg,#f953c6,#b91d73)}
.sbg-midnight{background:linear-gradient(135deg,#232526,#414345)}
.sbg-fire    {background:linear-gradient(135deg,#f12711,#f5af19)}
.sbg-neon    {background:linear-gradient(135deg,#00f260,#0575e6)}
.sbg-rose    {background:linear-gradient(135deg,#f43b47,#453a94)}
.sbg-mesh    {background:radial-gradient(at 40% 20%,#7b5cff 0,transparent 50%),radial-gradient(at 80% 0%,#00d4ff 0,transparent 50%),radial-gradient(at 0% 50%,#ff6b6b 0,transparent 50%),radial-gradient(at 80% 50%,#00ffa3 0,transparent 50%),#0b132b}

/* Temas estáticos extras */
.sbg-violet  {background:linear-gradient(135deg,#4776e6,#8e54e9)}
.sbg-arctic  {background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460)}
.sbg-lava    {background:linear-gradient(135deg,#200122,#6f0000)}
.sbg-galaxy  {background:radial-gradient(ellipse at top,#1b2735,#090a0f)}
.sbg-copper  {background:linear-gradient(135deg,#b79891,#94716b)}
.sbg-emerald {background:linear-gradient(135deg,#0f9b58,#00bf8f)}
.sbg-dusk    {background:linear-gradient(135deg,#2c3e50,#fd746c)}
.sbg-ice     {background:linear-gradient(135deg,#74ebd5,#acb6e5)}
.sbg-carbon  {background:repeating-linear-gradient(45deg,#1a1a1a 0,#1a1a1a 2px,#2a2a2a 2px,#2a2a2a 8px)}
.sbg-tropical{background:linear-gradient(135deg,#11998e,#38ef7d)}

/* ===== Temas Animados ===== */
@keyframes sbg-wave{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes sbg-pulse{0%,100%{opacity:1}50%{opacity:.7}}
@keyframes sbg-rotate{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}
@keyframes sbg-shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes sbg-breathe{0%,100%{background-size:200% 200%;background-position:0% 50%}50%{background-size:300% 300%;background-position:100% 50%}}
@keyframes sbg-aurora-move{0%{background-position:0% 0%,100% 100%,50% 50%}33%{background-position:100% 50%,0% 50%,100% 0%}66%{background-position:50% 100%,50% 0%,0% 100%}100%{background-position:0% 0%,100% 100%,50% 50%}}

.sbg-anim-wave{
    background:linear-gradient(270deg,#7b5cff,#00d4ff,#00ffa3,#ff6b6b,#7b5cff);
    background-size:400% 400%;
    animation:sbg-wave 4s ease infinite;
}
.sbg-anim-hue{
    background:linear-gradient(135deg,#ff0080,#ff8c00,#40e0d0);
    animation:sbg-rotate 4s linear infinite;
}
.sbg-anim-breathe{
    background:linear-gradient(135deg,#667eea,#764ba2,#f093fb);
    background-size:300% 300%;
    animation:sbg-breathe 5s ease infinite;
}
.sbg-anim-shimmer{
    background:linear-gradient(90deg,#1a1a2e 0%,#4c6fff 40%,#00d4ff 50%,#4c6fff 60%,#1a1a2e 100%);
    background-size:200% auto;
    animation:sbg-shimmer 3s linear infinite;
}
.sbg-anim-aurora{
    background:
        radial-gradient(ellipse at 0% 50%,rgba(123,92,255,.8) 0,transparent 60%),
        radial-gradient(ellipse at 100% 50%,rgba(0,212,255,.8) 0,transparent 60%),
        radial-gradient(ellipse at 50% 100%,rgba(0,255,163,.6) 0,transparent 60%),
        #0b132b;
    background-size:200% 200%,200% 200%,200% 200%,100% 100%;
    animation:sbg-aurora-move 6s ease infinite;
}
.sbg-anim-fire{
    background:linear-gradient(0deg,#ff4e00,#ec9f05,#ff4e00,#b31217);
    background-size:100% 400%;
    animation:sbg-wave 2s ease infinite;
}

/* Preview */
.sbg-preview-card{
    display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;border-radius:14px;
    max-width:260px;transition:background .25s,border .25s;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
}
.neo-avatar-demo{width:38px;height:38px;border-radius:50%;overflow:hidden;flex-shrink:0;border:2px solid rgba(255,255,255,.3)}
.neo-avatar-demo img{width:100%;height:100%;object-fit:cover;border-radius:50%}
</style>
@endsection
@section('content')
<div class="cfg-wrap">

    <div class="cfg-header">
        <div>
            <h4><i class="ri-settings-3-line me-2 text-primary"></i>Configuração da Empresa</h4>
            <p>Gerencie os dados e configurações fiscais da sua empresa</p>
        </div>
        <a href="{{ route('empresas.index') }}" class="btn btn-sm btn-secondary px-3">
            <i class="ri-arrow-left-line me-1"></i> Voltar
        </a>
    </div>

    @isset($empresa->id)
    {!!Form::open()->fill($item)->put()->route('config.update', [$item->id])->multipart()!!}
    @include('config.configuracao')
    {!!Form::close()!!}
    @else
    {!!Form::open()->fill($empresa)->post()->route('config.store')->multipart()!!}
    @include('empresas._forms')
    {!!Form::close()!!}
    @endisset

</div>
@endsection