@extends('layouts.dental')
@section('title','Comissões')
@section('content')

@if(session('success'))
<div style="margin-bottom:16px;background:#dcfce7;border:1px solid #86efac;color:#166534;padding:12px 16px;border-radius:8px">✓ {{ session('success') }}</div>
@endif

{{-- TABS --}}
<div style="display:flex;gap:0;border-bottom:2px solid #e2e8f0;margin-bottom:24px">
    <button onclick="showTab('relatorio')" id="tab-relatorio"
        style="padding:10px 22px;background:none;border:none;border-bottom:3px solid #2563eb;font-size:14px;font-weight:700;color:#2563eb;cursor:pointer">
        📊 Relatório
    </button>
    <button onclick="showTab('regras')" id="tab-regras"
        style="padding:10px 22px;background:none;border:none;border-bottom:3px solid transparent;font-size:14px;font-weight:500;color:#64748b;cursor:pointer">
        ⚙️ Regras de Comissão
    </button>
</div>

{{-- ══ RELATÓRIO ══ --}}
<div id="panel-relatorio">
    <form method="GET" style="display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:20px">
        <div>
            <label style="display:block;font-size:12px;font-weight:600;color:#64748b;margin-bottom:4px">De</label>
            <input type="date" name="from" value="{{ $from }}" style="padding:8px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px">
        </div>
        <div>
            <label style="display:block;font-size:12px;font-weight:600;color:#64748b;margin-bottom:4px">Até</label>
            <input type="date" name="to" value="{{ $to }}" style="padding:8px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px">
        </div>
        <button type="submit" class="btn btn-primary">Filtrar</button>
        <a href="?from={{ now()->startOfMonth()->toDateString() }}&to={{ now()->endOfMonth()->toDateString() }}" class="btn btn-secondary">Mês atual</a>
    </form>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px">
        <div class="card" style="padding:20px">
            <div style="font-size:12px;color:#64748b;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px">Total Faturado</div>
            <div style="font-size:28px;font-weight:700;color:#16a34a">R$ {{ number_format($totalFaturado,2,',','.') }}</div>
            <div style="font-size:12px;color:#94a3b8;margin-top:4px">Entradas pagas no período</div>
        </div>
        <div class="card" style="padding:20px">
            <div style="font-size:12px;color:#64748b;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px">Total Comissões</div>
            <div style="font-size:28px;font-weight:700;color:#2563eb">R$ {{ number_format($totalComissao,2,',','.') }}</div>
            <div style="font-size:12px;color:#94a3b8;margin-top:4px">Baseado nas regras cadastradas</div>
        </div>
    </div>
    <div class="card">
        <table>
            <thead><tr>
                <th>Dentista</th>
                <th style="text-align:center">Lançamentos</th>
                <th style="text-align:right">Faturado</th>
                <th style="text-align:center">% Comissão</th>
                <th style="text-align:right">Valor Comissão</th>
            </tr></thead>
            <tbody>
            @forelse($data as $row)
            <tr>
                <td>
                    <div style="font-weight:600;color:#1a202c">{{ $row['professional']->name }}</div>
                    @if($row['professional']->specialty)<div style="font-size:12px;color:#64748b">{{ $row['professional']->specialty }}</div>@endif
                </td>
                <td style="text-align:center;color:#64748b">{{ $row['count'] }}</td>
                <td style="text-align:right;font-weight:600;color:#16a34a">R$ {{ number_format($row['faturado'],2,',','.') }}</td>
                <td style="text-align:center;font-weight:600;color:#374151">
                    @if($row['percent'] > 0){{ number_format($row['percent'],1,',','.') }}%@else<span style="color:#94a3b8;font-size:12px">Sem regra</span>@endif
                </td>
                <td style="text-align:right;font-weight:700;color:{{ $row['comissao'] > 0 ? '#2563eb' : '#94a3b8' }}">
                    R$ {{ number_format($row['comissao'],2,',','.') }}
                </td>
            </tr>
            @empty
            <tr><td colspan="5" style="padding:48px;text-align:center;color:#94a3b8">Nenhum profissional ativo</td></tr>
            @endforelse
            </tbody>
            @if(count($data) > 1)
            <tfoot>
                <tr style="background:#f8fafc;font-weight:700">
                    <td colspan="2" style="padding:12px 16px">TOTAL</td>
                    <td style="text-align:right;color:#16a34a;padding:12px 16px">R$ {{ number_format($totalFaturado,2,',','.') }}</td>
                    <td></td>
                    <td style="text-align:right;color:#2563eb;padding:12px 16px">R$ {{ number_format($totalComissao,2,',','.') }}</td>
                </tr>
            </tfoot>
            @endif
        </table>
    </div>
</div>

{{-- ══ REGRAS ══ --}}
<div id="panel-regras" style="display:none">
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
        <p style="font-size:13px;color:#64748b;margin:0">Profissional+Procedimento prevalece sobre cada um isolado</p>
        <button onclick="document.getElementById('modal_rule').style.display='flex'" class="btn btn-primary">+ Nova Regra</button>
    </div>
    <div style="display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap">
        <span class="badge badge-blue">👤+🦷 Específico (maior prioridade)</span>
        <span class="badge badge-green">🦷 Por procedimento</span>
        <span class="badge badge-orange">👤 Por profissional</span>
    </div>
    <div class="card">
    <table>
        <thead><tr>
            <th>Profissional</th><th>Procedimento</th><th>Tipo</th><th>Valor</th><th>Prioridade</th><th>Status</th><th></th>
        </tr></thead>
        <tbody>
        @forelse($rules as $rule)
        @php
            $hasBoth=$rule->professional_id&&$rule->procedure_id;
            $hasProc=!$rule->professional_id&&$rule->procedure_id;
            $badgeClass=$hasBoth?'badge-blue':($hasProc?'badge-green':'badge-orange');
            $badgeLabel=$hasBoth?'Específico':($hasProc?'Por procedimento':'Por profissional');
        @endphp
        <tr>
            <td>{{ $rule->professional?->name ?? '— Todos —' }}</td>
            <td>{{ $rule->procedure?->name ?? '— Todos —' }}</td>
            <td style="font-size:13px">{{ $rule->calc_type==='percent'?'Percentual':'Valor fixo' }}</td>
            <td style="font-weight:700">{{ $rule->calc_type==='percent'?$rule->value.'%':'R$ '.number_format($rule->value,2,',','.') }}</td>
            <td><span class="badge {{ $badgeClass }}">{{ $badgeLabel }}</span></td>
            <td><span class="badge {{ $rule->active?'badge-green':'badge-gray' }}">{{ $rule->active?'Ativa':'Inativa' }}</span></td>
            <td style="text-align:right;white-space:nowrap">
                <form method="POST" action="{{ route('commission-rules.toggle',$rule) }}" style="display:inline">
                    @csrf @method('PATCH')
                    <button type="submit" style="background:none;border:none;color:#2563eb;cursor:pointer;font-size:12px;font-weight:500">{{ $rule->active?'Desativar':'Ativar' }}</button>
                </form>
                <form method="POST" action="{{ route('commission-rules.destroy',$rule) }}" style="display:inline" onsubmit="return confirm('Remover esta regra?')">
                    @csrf @method('DELETE')
                    <button type="submit" style="background:none;border:none;color:#dc2626;cursor:pointer;font-size:12px;font-weight:500;margin-left:8px">Excluir</button>
                </form>
            </td>
        </tr>
        @empty
        <tr><td colspan="7" style="padding:48px;text-align:center;color:#94a3b8">
            <div style="font-size:32px;margin-bottom:8px">⚙️</div>
            <div>Nenhuma regra cadastrada ainda</div>
        </td></tr>
        @endforelse
        </tbody>
    </table>
    </div>

    {{-- Modal nova regra --}}
    <div id="modal_rule" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;align-items:center;justify-content:center;padding:16px" onclick="if(event.target===this)this.style.display='none'">
    <div style="background:#fff;border-radius:14px;width:100%;max-width:480px;box-shadow:0 20px 60px rgba(0,0,0,.25)" onclick="event.stopPropagation()">
    <form method="POST" action="{{ route('commission-rules.store') }}">
    @csrf
    <div style="display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #f1f5f9">
        <h3 style="font-size:15px;font-weight:700;color:#1a202c">Nova Regra de Comissão</h3>
        <button type="button" onclick="document.getElementById('modal_rule').style.display='none'" style="background:none;border:none;font-size:24px;color:#94a3b8;cursor:pointer">×</button>
    </div>
    <div style="padding:20px;display:flex;flex-direction:column;gap:14px">
        <div style="background:#dbeafe;border-radius:8px;padding:12px;font-size:13px;color:#1e40af">
            Deixe <strong>Profissional</strong> ou <strong>Procedimento</strong> em branco para aplicar a todos. Quando ambos forem preenchidos, a regra tem <strong>maior prioridade</strong>.
        </div>
        <div>
            <label>Profissional</label>
            <select name="professional_id">
                <option value="">— Todos os profissionais —</option>
                @foreach($professionals as $prof)
                <option value="{{ $prof->id }}">{{ $prof->name }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label>Procedimento</label>
            <select name="procedure_id">
                <option value="">— Todos os procedimentos —</option>
                @foreach($procedures as $proc)
                <option value="{{ $proc->id }}">{{ $proc->name }}</option>
                @endforeach
            </select>
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
            <div>
                <label>Tipo de cálculo *</label>
                <select name="calc_type" id="calc_type" onchange="updateLabel(this.value)" required>
                    <option value="percent">Percentual (%)</option>
                    <option value="fixed">Valor fixo (R$)</option>
                </select>
            </div>
            <div>
                <label id="value_label">Percentual (%) *</label>
                <input type="number" name="value" id="value_input" step="0.01" min="0" max="100" required placeholder="Ex: 30">
            </div>
        </div>
    </div>
    <div style="display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;border-top:1px solid #f1f5f9;background:#f8fafc">
        <button type="button" onclick="document.getElementById('modal_rule').style.display='none'" class="btn btn-secondary">Cancelar</button>
        <button type="submit" class="btn btn-primary">Salvar Regra</button>
    </div>
    </form>
    </div>
    </div>
</div>

<script>
function showTab(tab) {
    ['relatorio','regras'].forEach(function(t) {
        document.getElementById('panel-'+t).style.display = t===tab?'block':'none';
        var btn = document.getElementById('tab-'+t);
        btn.style.borderBottom = t===tab?'3px solid #2563eb':'3px solid transparent';
        btn.style.color = t===tab?'#2563eb':'#64748b';
        btn.style.fontWeight = t===tab?'700':'500';
    });
}
var params = new URLSearchParams(window.location.search);
if (params.get('tab')==='regras') showTab('regras');
function updateLabel(type) {
    var l=document.getElementById('value_label'), i=document.getElementById('value_input');
    if(type==='percent'){l.textContent='Percentual (%) *';i.max=100;i.placeholder='Ex: 30';}
    else{l.textContent='Valor fixo (R$) *';i.removeAttribute('max');i.placeholder='Ex: 50,00';}
}
document.addEventListener('keydown',function(e){if(e.key==='Escape')document.getElementById('modal_rule').style.display='none';});
</script>
@endsection