@extends('layouts.app')

@section('title', 'Caixa')
@section('page_title', 'Caixa')
@section('page_subtitle', 'Abertura, fechamento e movimentacoes')

@section('page_actions')
    @if($session)
        <a href="{{ route('pdv.index') }}" class="button primary">Ir para o PDV</a>
    @endif
@endsection

@section('content')
@if(session('success'))
    <div class="notice">{{ session('success') }}</div>
@endif
@if(session('warning'))
    <div class="notice warn">{{ session('warning') }}</div>
@endif

@if($session)
<div style="display:grid;grid-template-columns:1fr 1fr;gap:18px;">
    <div class="panel">
        <div class="panel-header">
            <h2 style="color:var(--ok)">Caixa Aberto</h2>
        </div>
        <div style="padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:16px;">
            <div>
                <div class="metric-label">Aberto em</div>
                <div style="font-weight:600;font-size:14px;">{{ $session->opened_at->format('d/m/Y H:i') }}</div>
            </div>
            <div>
                <div class="metric-label">Valor de Abertura</div>
                <div style="font-weight:600;font-size:14px;">R$ {{ number_format($session->opening_amount, 2, ',', '.') }}</div>
            </div>
            <div>
                <div class="metric-label">Operador</div>
                <div style="font-weight:600;font-size:14px;">{{ $session->user?->name ?? '—' }}</div>
            </div>
            <div>
                <div class="metric-label">Total Esperado</div>
                @php $expected = app(\App\Services\CashService::class)->calculateExpected($session); @endphp
                <div style="font-weight:600;font-size:14px;color:var(--primary);">R$ {{ number_format($expected, 2, ',', '.') }}</div>
            </div>
        </div>
        <div style="padding:0 18px 18px;display:flex;gap:10px;flex-wrap:wrap;">
            <button onclick="document.getElementById('modal-sangria').style.display='flex'" class="button">Sangria</button>
            <button onclick="document.getElementById('modal-suprimento').style.display='flex'" class="button">Suprimento</button>
            <button onclick="document.getElementById('modal-close').style.display='flex'" class="button danger">Fechar Caixa</button>
        </div>
    </div>

    <div class="panel">
        <div class="panel-header"><h2>Movimentacoes de Hoje</h2></div>
        <div class="table-wrap">
            <table style="min-width:0;">
                <thead><tr><th>Tipo</th><th>Valor</th><th>Descricao</th></tr></thead>
                <tbody>
                    @php $typeLabel = ['outflow'=>'Sangria','inflow'=>'Suprimento','sale'=>'Venda','cancellation'=>'Cancelamento','opening'=>'Abertura','return'=>'Devolucao']; @endphp
                    @forelse($session->movements as $mov)
                    <tr>
                        <td><span class="pill {{ $mov->type === 'outflow' ? 'danger' : 'ok' }}" style="min-width:auto;padding:2px 10px;">{{ $typeLabel[$mov->type] ?? ucfirst($mov->type) }}</span></td>
                        <td>R$ {{ number_format($mov->amount, 2, ',', '.') }}</td>
                        <td>{{ $mov->description ?? '—' }}</td>
                    </tr>
                    @empty
                    <tr><td colspan="3" class="empty">Sem movimentacoes</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@else
<div class="panel" style="max-width:480px;margin:0 auto;">
    <div class="panel-header"><h2>Abrir Caixa</h2></div>
    <form method="POST" action="{{ route('cash.open') }}">
        @csrf
        <div class="form-grid">
            <div class="form-field full">
                <label>Valor de Abertura (R$) *</label>
                <input type="number" name="opening_amount" step="0.01" min="0" value="0.00" required>
            </div>
            <div class="form-field full">
                <label>Observacoes</label>
                <input type="text" name="observations" maxlength="255">
            </div>
        </div>
        <div style="padding:0 18px 18px;">
            <button type="submit" class="button primary" style="width:100%;">Abrir Caixa e Ir ao PDV</button>
        </div>
    </form>
</div>
@endif

<div class="panel" style="margin-top:4px;">
    <div class="panel-header"><h2>Historico de Caixas</h2></div>
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Abertura</th>
                    <th>Fechamento</th>
                    <th>Operador</th>
                    <th style="text-align:right;">Abertura</th>
                    <th style="text-align:right;">Esperado</th>
                    <th style="text-align:right;">Contado</th>
                    <th style="text-align:right;">Diferenca</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                @forelse($sessions as $s)
                <tr>
                    <td>{{ $s->opened_at->format('d/m/Y H:i') }}</td>
                    <td>{{ $s->closed_at ? $s->closed_at->format('d/m/Y H:i') : '—' }}</td>
                    <td>{{ $s->user?->name ?? '—' }}</td>
                    <td style="text-align:right;">R$ {{ number_format($s->opening_amount, 2, ',', '.') }}</td>
                    <td style="text-align:right;">{{ $s->expected_amount ? 'R$ '.number_format($s->expected_amount,2,',','.') : '—' }}</td>
                    <td style="text-align:right;">{{ $s->closing_amount !== null ? 'R$ '.number_format($s->closing_amount,2,',','.') : '—' }}</td>
                    <td style="text-align:right;">
                        @if($s->difference !== null)
                            <span style="color:{{ $s->difference >= 0 ? 'var(--ok)' : 'var(--danger)' }};">
                                {{ ($s->difference >= 0 ? '+' : '') . 'R$ '.number_format(abs($s->difference),2,',','.') }}
                            </span>
                        @else —
                        @endif
                    </td>
                    <td>
                        <span class="pill {{ $s->status === 'open' ? 'ok' : 'neutral' }}" style="min-width:auto;padding:2px 10px;">
                            {{ $s->status === 'open' ? 'Aberto' : 'Fechado' }}
                        </span>
                    </td>
                </tr>
                @empty
                <tr><td colspan="8" class="empty">Sem registros.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
<div style="margin-top:16px;">{{ $sessions->links() }}</div>

@if($session)
@push('styles')
<style>
.modal-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(15,23,42,.5);
    z-index:999;
    align-items:center;
    justify-content:center;
}
.modal-box {
    background:var(--surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    width:400px;
    max-width:90vw;
    overflow:hidden;
}
.modal-header {
    min-height:52px;
    border-bottom:1px solid var(--border);
    padding:13px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    background:var(--surface-2);
}
.modal-header h2 { margin:0; font-size:15px; font-weight:700; }
.modal-close {
    background:none; border:none;
    font-size:1.3rem; cursor:pointer;
    color:var(--muted); line-height:1;
    padding:4px;
}
.modal-close:hover { color:var(--text); }
.modal-body { padding:18px; display:grid; gap:16px; }
.modal-footer {
    padding:0 18px 18px;
    display:flex;
    justify-content:flex-end;
    gap:10px;
}
</style>
@endpush

<div id="modal-sangria" class="modal-overlay" onclick="if(event.target===this)this.style.display='none'">
    <div class="modal-box">
        <div class="modal-header">
            <h2>Sangria</h2>
            <button class="modal-close" onclick="document.getElementById('modal-sangria').style.display='none'">x</button>
        </div>
        <form method="POST" action="{{ route('cash.sangria', $session) }}">
            @csrf
            <div class="modal-body">
                <div class="form-field">
                    <label>Valor (R$) *</label>
                    <input type="number" name="amount" step="0.01" min="0.01" required>
                </div>
                <div class="form-field">
                    <label>Descricao</label>
                    <input type="text" name="description" value="Sangria" maxlength="255">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="button" onclick="document.getElementById('modal-sangria').style.display='none'">Cancelar</button>
                <button type="submit" class="button danger">Registrar Sangria</button>
            </div>
        </form>
    </div>
</div>

<div id="modal-suprimento" class="modal-overlay" onclick="if(event.target===this)this.style.display='none'">
    <div class="modal-box">
        <div class="modal-header">
            <h2>Suprimento</h2>
            <button class="modal-close" onclick="document.getElementById('modal-suprimento').style.display='none'">x</button>
        </div>
        <form method="POST" action="{{ route('cash.suprimento', $session) }}">
            @csrf
            <div class="modal-body">
                <div class="form-field">
                    <label>Valor (R$) *</label>
                    <input type="number" name="amount" step="0.01" min="0.01" required>
                </div>
                <div class="form-field">
                    <label>Descricao</label>
                    <input type="text" name="description" value="Suprimento" maxlength="255">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="button" onclick="document.getElementById('modal-suprimento').style.display='none'">Cancelar</button>
                <button type="submit" class="button primary">Registrar Suprimento</button>
            </div>
        </form>
    </div>
</div>

<div id="modal-close" class="modal-overlay" onclick="if(event.target===this)this.style.display='none'">
    <div class="modal-box" style="width:440px;">
        <div class="modal-header">
            <h2>Fechar Caixa</h2>
            <button class="modal-close" onclick="document.getElementById('modal-close').style.display='none'">x</button>
        </div>
        <form method="POST" action="{{ route('cash.close', $session) }}">
            @csrf @method('PUT')
            <div class="modal-body">
                <div class="form-field">
                    <label>Valor Contado em Caixa (R$) *</label>
                    <input type="number" name="closing_amount" step="0.01" min="0" required>
                </div>
                <div class="form-field">
                    <label>Observacoes</label>
                    <textarea name="observations" rows="2"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="button" onclick="document.getElementById('modal-close').style.display='none'">Cancelar</button>
                <button type="submit" class="button danger">Fechar Caixa</button>
            </div>
        </form>
    </div>
</div>
@endif
@endsection