<x-admin-layout title="Relatórios — OPCON Área Interna">

    <div style="max-width: 860px;">

        <div style="margin-bottom: 1.5rem;">
            <h1 style="font-size:1.375rem; font-weight:700; color:#1e3a5f; margin:0;">Relatórios</h1>
            <p style="font-size:0.875rem; color:#64748b; margin:0.25rem 0 0;">Exporte dados em CSV compatível com Excel</p>
        </div>

        {{-- Leads --}}
        <div style="background:#fff; border-radius:12px; border:1px solid #e2e8f0; padding:1.5rem; margin-bottom:1rem;">
            <div style="display:flex; align-items:center; gap:0.75rem; margin-bottom:1.25rem;">
                <div style="width:36px; height:36px; border-radius:8px; background:#eff6ff; display:flex; align-items:center; justify-content:center; flex-shrink:0;">
                    <svg style="width:18px;height:18px; color:#2563eb;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                </div>
                <div>
                    <h2 style="font-size:1rem; font-weight:700; color:#1e3a5f; margin:0;">Leads / CRM</h2>
                    <p style="font-size:0.8125rem; color:#64748b; margin:0;">Todos os leads com status e datas</p>
                </div>
            </div>
            <form method="GET" action="{{ route('admin.relatorios.leads') }}" style="display:flex; flex-wrap:wrap; gap:0.75rem; align-items:flex-end;">
                <div>
                    <label style="display:block; font-size:0.75rem; font-weight:600; color:#64748b; margin-bottom:0.3rem;">Status</label>
                    <select name="status" style="padding:0.5rem 0.75rem; border:1px solid #e2e8f0; border-radius:8px; font-size:0.875rem; font-family:inherit; color:#1e3a5f; background:#fff; outline:none;">
                        <option value="">Todos</option>
                        @foreach($leadStatuses as $s)
                            <option value="{{ $s }}">{{ $s }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label style="display:block; font-size:0.75rem; font-weight:600; color:#64748b; margin-bottom:0.3rem;">De</label>
                    <input type="date" name="from" style="padding:0.5rem 0.75rem; border:1px solid #e2e8f0; border-radius:8px; font-size:0.875rem; font-family:inherit; color:#1e3a5f; outline:none;">
                </div>
                <div>
                    <label style="display:block; font-size:0.75rem; font-weight:600; color:#64748b; margin-bottom:0.3rem;">Até</label>
                    <input type="date" name="to" style="padding:0.5rem 0.75rem; border:1px solid #e2e8f0; border-radius:8px; font-size:0.875rem; font-family:inherit; color:#1e3a5f; outline:none;">
                </div>
                <button type="submit"
                        style="display:inline-flex; align-items:center; gap:0.5rem; padding:0.5rem 1.25rem; background:#2563eb; color:#fff; border:none; border-radius:8px; font-size:0.875rem; font-weight:600; font-family:inherit; cursor:pointer; transition:background 0.15s;"
                        onmouseover="this.style.background='#1d4ed8'" onmouseout="this.style.background='#2563eb'">
                    <svg style="width:15px;height:15px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                    </svg>
                    Exportar CSV
                </button>
            </form>
        </div>

        {{-- Demandas --}}
        <div style="background:#fff; border-radius:12px; border:1px solid #e2e8f0; padding:1.5rem; margin-bottom:1rem;">
            <div style="display:flex; align-items:center; gap:0.75rem; margin-bottom:1.25rem;">
                <div style="width:36px; height:36px; border-radius:8px; background:#f0fdf4; display:flex; align-items:center; justify-content:center; flex-shrink:0;">
                    <svg style="width:18px;height:18px; color:#16a34a;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"/>
                    </svg>
                </div>
                <div>
                    <h2 style="font-size:1rem; font-weight:700; color:#1e3a5f; margin:0;">Demandas / Kanban</h2>
                    <p style="font-size:0.8125rem; color:#64748b; margin:0;">Demandas com status, setor, SLA e responsável</p>
                </div>
            </div>
            <form method="GET" action="{{ route('admin.relatorios.demandas') }}" style="display:flex; flex-wrap:wrap; gap:0.75rem; align-items:flex-end;">
                <div>
                    <label style="display:block; font-size:0.75rem; font-weight:600; color:#64748b; margin-bottom:0.3rem;">Setor</label>
                    <select name="setor" style="padding:0.5rem 0.75rem; border:1px solid #e2e8f0; border-radius:8px; font-size:0.875rem; font-family:inherit; color:#1e3a5f; background:#fff; outline:none;">
                        <option value="">Todos</option>
                        @foreach($demandaSetores as $s)
                            <option value="{{ $s }}">{{ $s }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label style="display:block; font-size:0.75rem; font-weight:600; color:#64748b; margin-bottom:0.3rem;">De</label>
                    <input type="date" name="from" style="padding:0.5rem 0.75rem; border:1px solid #e2e8f0; border-radius:8px; font-size:0.875rem; font-family:inherit; color:#1e3a5f; outline:none;">
                </div>
                <div>
                    <label style="display:block; font-size:0.75rem; font-weight:600; color:#64748b; margin-bottom:0.3rem;">Até</label>
                    <input type="date" name="to" style="padding:0.5rem 0.75rem; border:1px solid #e2e8f0; border-radius:8px; font-size:0.875rem; font-family:inherit; color:#1e3a5f; outline:none;">
                </div>
                <button type="submit"
                        style="display:inline-flex; align-items:center; gap:0.5rem; padding:0.5rem 1.25rem; background:#16a34a; color:#fff; border:none; border-radius:8px; font-size:0.875rem; font-weight:600; font-family:inherit; cursor:pointer; transition:background 0.15s;"
                        onmouseover="this.style.background='#15803d'" onmouseout="this.style.background='#16a34a'">
                    <svg style="width:15px;height:15px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                    </svg>
                    Exportar CSV
                </button>
            </form>
        </div>

        {{-- Contratos --}}
        <div style="background:#fff; border-radius:12px; border:1px solid #e2e8f0; padding:1.5rem; margin-bottom:1rem;">
            <div style="display:flex; align-items:center; gap:0.75rem; margin-bottom:1.25rem;">
                <div style="width:36px; height:36px; border-radius:8px; background:#fdf4ff; display:flex; align-items:center; justify-content:center; flex-shrink:0;">
                    <svg style="width:18px;height:18px; color:#9333ea;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    </svg>
                </div>
                <div>
                    <h2 style="font-size:1rem; font-weight:700; color:#1e3a5f; margin:0;">Contratos</h2>
                    <p style="font-size:0.8125rem; color:#64748b; margin:0;">Contratos com regime, honorário e workflow</p>
                </div>
            </div>
            <form method="GET" action="{{ route('admin.relatorios.contratos') }}" style="display:flex; flex-wrap:wrap; gap:0.75rem; align-items:flex-end;">
                <div>
                    <label style="display:block; font-size:0.75rem; font-weight:600; color:#64748b; margin-bottom:0.3rem;">Status</label>
                    <select name="status" style="padding:0.5rem 0.75rem; border:1px solid #e2e8f0; border-radius:8px; font-size:0.875rem; font-family:inherit; color:#1e3a5f; background:#fff; outline:none;">
                        <option value="">Todos</option>
                        @foreach($contratoStatus as $s)
                            <option value="{{ $s }}">{{ $s }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label style="display:block; font-size:0.75rem; font-weight:600; color:#64748b; margin-bottom:0.3rem;">De</label>
                    <input type="date" name="from" style="padding:0.5rem 0.75rem; border:1px solid #e2e8f0; border-radius:8px; font-size:0.875rem; font-family:inherit; color:#1e3a5f; outline:none;">
                </div>
                <div>
                    <label style="display:block; font-size:0.75rem; font-weight:600; color:#64748b; margin-bottom:0.3rem;">Até</label>
                    <input type="date" name="to" style="padding:0.5rem 0.75rem; border:1px solid #e2e8f0; border-radius:8px; font-size:0.875rem; font-family:inherit; color:#1e3a5f; outline:none;">
                </div>
                <button type="submit"
                        style="display:inline-flex; align-items:center; gap:0.5rem; padding:0.5rem 1.25rem; background:#9333ea; color:#fff; border:none; border-radius:8px; font-size:0.875rem; font-weight:600; font-family:inherit; cursor:pointer; transition:background 0.15s;"
                        onmouseover="this.style.background='#7e22ce'" onmouseout="this.style.background='#9333ea'">
                    <svg style="width:15px;height:15px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                    </svg>
                    Exportar CSV
                </button>
            </form>
        </div>

        {{-- Financeiro --}}
        <div style="background:#fff; border-radius:12px; border:1px solid #e2e8f0; padding:1.5rem; margin-bottom:1rem;">
            <div style="display:flex; align-items:center; gap:0.75rem; margin-bottom:1.25rem;">
                <div style="width:36px; height:36px; border-radius:8px; background:#f0fdf4; display:flex; align-items:center; justify-content:center; flex-shrink:0;">
                    <svg style="width:18px;height:18px; color:#25b87e;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
                <div>
                    <h2 style="font-size:1rem; font-weight:700; color:#1e3a5f; margin:0;">Financeiro</h2>
                    <p style="font-size:0.8125rem; color:#64748b; margin:0;">Cobranças por mês e status — CSV ou PDF</p>
                </div>
            </div>
            <form method="GET" action="{{ route('admin.relatorios.financeiro') }}" style="display:flex; flex-wrap:wrap; gap:0.75rem; align-items:flex-end;">
                <div>
                    <label style="display:block; font-size:0.75rem; font-weight:600; color:#64748b; margin-bottom:0.3rem;">Mês</label>
                    <input type="month" name="mes" value="{{ now()->format('Y-m') }}" style="padding:0.5rem 0.75rem; border:1px solid #e2e8f0; border-radius:8px; font-size:0.875rem; font-family:inherit; color:#1e3a5f; outline:none;">
                </div>
                <div>
                    <label style="display:block; font-size:0.75rem; font-weight:600; color:#64748b; margin-bottom:0.3rem;">Status</label>
                    <select name="status" style="padding:0.5rem 0.75rem; border:1px solid #e2e8f0; border-radius:8px; font-size:0.875rem; font-family:inherit; color:#1e3a5f; background:#fff; outline:none;">
                        <option value="">Todos</option>
                        <option value="pago">Pago</option>
                        <option value="pendente">Pendente</option>
                        <option value="vencido">Vencido</option>
                    </select>
                </div>
                <button type="submit" name="formato" value="csv"
                        style="display:inline-flex; align-items:center; gap:0.5rem; padding:0.5rem 1.125rem; background:#25b87e; color:#fff; border:none; border-radius:8px; font-size:0.875rem; font-weight:600; font-family:inherit; cursor:pointer;"
                        onmouseover="this.style.background='#1fa06d'" onmouseout="this.style.background='#25b87e'">
                    <svg style="width:14px;height:14px;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                    CSV
                </button>
                <button type="submit" name="formato" value="pdf"
                        style="display:inline-flex; align-items:center; gap:0.5rem; padding:0.5rem 1.125rem; background:#1e3a5f; color:#fff; border:none; border-radius:8px; font-size:0.875rem; font-weight:600; font-family:inherit; cursor:pointer;"
                        onmouseover="this.style.background='#162d4a'" onmouseout="this.style.background='#1e3a5f'">
                    <svg style="width:14px;height:14px;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                    PDF
                </button>
            </form>
        </div>

        {{-- Obrigações --}}
        <div style="background:#fff; border-radius:12px; border:1px solid #e2e8f0; padding:1.5rem;">
            <div style="display:flex; align-items:center; gap:0.75rem; margin-bottom:1.25rem;">
                <div style="width:36px; height:36px; border-radius:8px; background:#fffbeb; display:flex; align-items:center; justify-content:center; flex-shrink:0;">
                    <svg style="width:18px;height:18px; color:#d97706;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
                    </svg>
                </div>
                <div>
                    <h2 style="font-size:1rem; font-weight:700; color:#1e3a5f; margin:0;">Obrigações Acessórias</h2>
                    <p style="font-size:0.8125rem; color:#64748b; margin:0;">Entregas fiscais e trabalhistas por mês — CSV ou PDF</p>
                </div>
            </div>
            <form method="GET" action="{{ route('admin.relatorios.obrigacoes') }}" style="display:flex; flex-wrap:wrap; gap:0.75rem; align-items:flex-end;">
                <div>
                    <label style="display:block; font-size:0.75rem; font-weight:600; color:#64748b; margin-bottom:0.3rem;">Mês</label>
                    <input type="month" name="mes" value="{{ now()->format('Y-m') }}" style="padding:0.5rem 0.75rem; border:1px solid #e2e8f0; border-radius:8px; font-size:0.875rem; font-family:inherit; color:#1e3a5f; outline:none;">
                </div>
                <button type="submit" name="formato" value="csv"
                        style="display:inline-flex; align-items:center; gap:0.5rem; padding:0.5rem 1.125rem; background:#d97706; color:#fff; border:none; border-radius:8px; font-size:0.875rem; font-weight:600; font-family:inherit; cursor:pointer;"
                        onmouseover="this.style.background='#b45309'" onmouseout="this.style.background='#d97706'">
                    <svg style="width:14px;height:14px;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                    CSV
                </button>
                <button type="submit" name="formato" value="pdf"
                        style="display:inline-flex; align-items:center; gap:0.5rem; padding:0.5rem 1.125rem; background:#1e3a5f; color:#fff; border:none; border-radius:8px; font-size:0.875rem; font-weight:600; font-family:inherit; cursor:pointer;"
                        onmouseover="this.style.background='#162d4a'" onmouseout="this.style.background='#1e3a5f'">
                    <svg style="width:14px;height:14px;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                    PDF
                </button>
            </form>
        </div>

    </div>

</x-admin-layout>
