@extends("layouts.dental")
@section("title","Regras de Comissão")
@section("content")

@if(session("success"))<div class="alert-success">✓ {{ session("success") }}</div>@endif

<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
    <div>
        <h2 style="font-size:18px;font-weight:700;color:#1a202c;margin:0">Regras de Comissão</h2>
        <p style="font-size:13px;color:#64748b;margin-top:2px">Profissional+Procedimento prevalece sobre cada um isolado</p>
    </div>
    <button onclick="document.getElementById('modal_rule').style.display='flex'" class="btn btn-primary">+ Nova Regra</button>
</div>

{{-- Legenda hierarquia --}}
<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;
        $hasProf = $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;color:#1a202c">
            {{ $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" class="modal-overlay" onclick="if(event.target===this)this.style.display='none'">
<div class="modal-box" onclick="event.stopPropagation()" style="max-width:480px">
<form method="POST" action="{{ route('commission-rules.store') }}">
@csrf
<div class="modal-header">
    <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 class="modal-body" style="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 maior prioridade.
    </div>
    <div>
        <label>Profissional</label>
        <select name="professional_id">
            <option value="">— Todos os profissionais —</option>
            @foreach($professionals as $p)
            <option value="{{ $p->id }}">{{ $p->name }}</option>
            @endforeach
        </select>
    </div>
    <div>
        <label>Procedimento</label>
        <select name="procedure_id">
            <option value="">— Todos os procedimentos —</option>
            @foreach($procedures as $p)
            <option value="{{ $p->id }}">{{ $p->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 class="modal-footer">
    <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>

<script>
function updateLabel(type) {
    var l = document.getElementById("value_label");
    var 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