@extends('layouts.dental')
@section('title', 'Caixa')
@section('content')

<div style="display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap">
    <form method="GET" style="display:flex;gap:8px;align-items:center">
        <input type="date" name="date" value="{{ $date }}" style="padding:8px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;width:auto">
        <button type="submit" class="btn btn-secondary">Filtrar</button>
    </form>
    <button onclick="document.getElementById('modal_trans').style.display='flex'" class="btn btn-primary" style="margin-left:auto">+ Novo Lançamento</button>
</div>

{{-- Cards resumo --}}
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:20px">
    <div class="card" style="padding:18px">
        <div style="font-size:12px;color:#64748b;font-weight:600;margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px">Entradas</div>
        <div style="font-size:26px;font-weight:700;color:#16a34a">R$ {{ number_format($totalIncome,2,',','.') }}</div>
    </div>
    <div class="card" style="padding:18px">
        <div style="font-size:12px;color:#64748b;font-weight:600;margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px">Saídas</div>
        <div style="font-size:26px;font-weight:700;color:#dc2626">R$ {{ number_format($totalExpense,2,',','.') }}</div>
    </div>
    <div class="card" style="padding:18px">
        <div style="font-size:12px;color:#64748b;font-weight:600;margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px">Saldo</div>
        <div style="font-size:26px;font-weight:700;color:{{ $balance >= 0 ? '#16a34a' : '#dc2626' }}">R$ {{ number_format($balance,2,',','.') }}</div>
    </div>
</div>

{{-- Tabela --}}
<div class="card">
    <table>
        <thead>
            <tr>
                <th>Descrição</th>
                <th>Categoria</th>
                <th>Pagamento</th>
                <th>Valor</th>
                <th>Status</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @forelse($transactions as $t)
            <tr>
                <td>
                    <div style="font-weight:600;color:#1a202c">{{ $t->description }}</div>
                    @if($t->patient)<div style="font-size:12px;color:#64748b">{{ $t->patient->name }}</div>@endif
                </td>
                <td style="font-size:13px">{{ ucfirst(str_replace('_',' ',$t->category)) }}</td>
                <td style="font-size:13px">{{ $t->payment_method ? ucfirst(str_replace('_',' ',$t->payment_method)) : '-' }}</td>
                <td style="font-weight:700;color:{{ $t->type==='income' ? '#16a34a' : '#dc2626' }}">
                    {{ $t->type==='income' ? '+' : '-' }} R$ {{ number_format($t->amount,2,',','.') }}
                </td>
                <td>
                    <span class="badge {{ $t->status==='pago' ? 'badge-green' : ($t->status==='pendente' ? 'badge-blue' : 'badge-gray') }}">
                        {{ ucfirst($t->status) }}
                    </span>
                </td>
                <td style="text-align:right">
                    <form method="POST" action="{{ route('transactions.destroy', $t) }}" onsubmit="return confirm('Cancelar este lançamento?')" style="display:inline">
                        @csrf @method('DELETE')
                        <button type="submit" style="background:none;border:none;color:#dc2626;cursor:pointer;font-size:12px;font-weight:500">Cancelar</button>
                    </form>
                </td>
            </tr>
            @empty
            <tr><td colspan="6" style="padding:48px;text-align:center;color:#94a3b8">
                <div style="font-size:36px;margin-bottom:8px">💰</div>
                <div>Nenhum lançamento para esta data</div>
            </td></tr>
            @endforelse
        </tbody>
    </table>
    @if($transactions->hasPages())
    <div style="padding:14px 20px;border-top:1px solid #f1f5f9">{{ $transactions->links() }}</div>
    @endif
</div>

{{-- Modal novo lançamento --}}
<div id="modal_trans" 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:560px;max-height:92vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.25)" onclick="event.stopPropagation()">
<form method="POST" action="{{ route('transactions.store') }}">
@csrf
<div style="display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #f1f5f9;position:sticky;top:0;background:#fff;z-index:5">
    <h3 style="font-weight:700;color:#1a202c;font-size:15px">Novo Lançamento</h3>
    <button type="button" onclick="document.getElementById('modal_trans').style.display='none'" style="background:none;border:none;font-size:24px;color:#94a3b8;cursor:pointer;line-height:1">×</button>
</div>
<div style="padding:20px;display:flex;flex-direction:column;gap:14px">

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
        <div>
            <label>Tipo *</label>
            <select name="type" required>
                <option value="income">Entrada</option>
                <option value="expense">Saída</option>
            </select>
        </div>
        <div>
            <label>Categoria *</label>
            <select name="category" required>
                <option value="consulta">Consulta</option>
                <option value="procedimento">Procedimento</option>
                <option value="material">Material</option>
                <option value="salario">Salário</option>
                <option value="aluguel">Aluguel</option>
                <option value="outros">Outros</option>
            </select>
        </div>
    </div>

    <div style="position:relative">
        <label>Paciente</label>
        <input type="text" id="patient_search" placeholder="Buscar paciente..." autocomplete="off"
            style="width:100%" oninput="filterPatients(this.value)">
        <input type="hidden" name="patient_id" id="patient_id_input">
        <div id="patient_dropdown" style="display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #e2e8f0;border-radius:8px;max-height:200px;overflow-y:auto;z-index:9999;box-shadow:0 4px 12px rgba(0,0,0,.1)"></div>
    </div>
    <script>
    var allPatients = @json($patients);
    function patientLabel(p) { return p.name ? p.name : p.phone; }
    function filterPatients(q) {
        var dd = document.getElementById("patient_dropdown");
        var input = document.getElementById("patient_id_input");
        if (!q) { dd.style.display="none"; input.value=""; return; }
        var filtered = allPatients.filter(function(p){
            var label = patientLabel(p).toLowerCase();
            return label.indexOf(q.toLowerCase()) !== -1;
        });
        if (filtered.length === 0) { dd.style.display="none"; return; }
        dd.innerHTML = filtered.map(function(p){
            return '<div onclick="selectPatient(' + p.id + ',this)" data-name="' + patientLabel(p) + '" style="padding:10px 14px;cursor:pointer;font-size:14px;border-bottom:1px solid #f1f5f9">' + patientLabel(p) + '</div>';
        }).join("");
        dd.style.display="block";
    }
    function selectPatient(id, el) {
        document.getElementById("patient_search").value = el.getAttribute("data-name");
        document.getElementById("patient_id_input").value = id;
        document.getElementById("patient_dropdown").style.display="none";
    }
    document.addEventListener("click", function(e){
        var dd = document.getElementById("patient_dropdown");
        var ps = document.getElementById("patient_search");
        if (dd && ps && e.target !== ps && !dd.contains(e.target)) dd.style.display="none";
    });
    </script>
    <div>
        <label>Descrição *</label>
        <input type="text" name="description" required placeholder="Ex: Consulta - João Silva">
    </div>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
        <div>
            <label>Valor (R$) *</label>
            <input type="number" name="amount" step="0.01" min="0.01" required placeholder="0,00">
        </div>
        <div>
            <label>Data *</label>
            <input type="date" name="due_date" value="{{ $date }}" required>
        </div>
    </div>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
        <div>
            <label>Forma de pagamento</label>
            <select name="payment_method">
                <option value="">Selecione</option>
                <option value="dinheiro">Dinheiro</option>
                <option value="pix">PIX</option>
                <option value="cartao_credito">Cartão de Crédito</option>
                <option value="cartao_debito">Cartão de Débito</option>
                <option value="boleto">Boleto</option>
            </select>
        </div>
        <div>
            <label>Status *</label>
            <select name="status" required>
                <option value="pago">Pago</option>
                <option value="pendente">Pendente</option>
            </select>
        </div>
    </div>

    <div>
        <label>Observação</label>
        <textarea name="notes" rows="2" style="resize:none"></textarea>
    </div>
</div>
<div style="display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;border-top:1px solid #f1f5f9;background:#f8fafc;position:sticky;bottom:0">
    <button type="button" onclick="document.getElementById('modal_trans').style.display='none'" class="btn btn-secondary">Cancelar</button>
    <button type="submit" class="btn btn-primary">Salvar lançamento</button>
</div>
</form>
</div>
</div>

<script>
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') document.getElementById('modal_trans').style.display = 'none';
});
</script>
@endsection