@extends('layouts.admin')
@section('title', 'Contas Financeiras — Configurações')
@section('breadcrumb')
    <a class="breadcrumb-item" href="{{ route('admin.settings.hotel.index') }}">Configurações</a>
    <span class="breadcrumb-separator">/</span>
    <span class="breadcrumb-current">Contas Financeiras</span>
@endsection

@push('styles')
<style>
.settings-layout { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
.settings-nav { background: #fff; border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; position: sticky; top: 80px; }
.settings-nav-header { padding: 16px 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.settings-nav-link { display: flex; align-items: center; gap: 10px; padding: 11px 20px; color: var(--color-text); font-size: 13px; font-weight: 500; text-decoration: none; border-left: 3px solid transparent; transition: all 0.15s; }
.settings-nav-link:hover { background: var(--color-bg); color: var(--color-primary); }
.settings-nav-link.active { background: color-mix(in srgb, var(--color-primary) 8%, white); color: var(--color-primary); font-weight: 700; border-left-color: var(--color-primary); }
@media (max-width: 768px) { .settings-layout { grid-template-columns: 1fr; } .settings-nav { position: static; } }
</style>
@endpush

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Configurações</h1>
        <p class="page-subtitle">Contas bancárias e caixas físicos do hotel.</p>
    </div>
</div>

<div class="settings-layout">
    <nav class="settings-nav">
        <div class="settings-nav-header">Configurações</div>
        <a href="{{ route('admin.settings.hotel.index') }}" class="settings-nav-link">
            <i data-lucide="building-2" style="width:16px;height:16px;"></i> Perfil do Hotel
        </a>
        <a href="{{ route('admin.settings.payment-methods.index') }}" class="settings-nav-link">
            <i data-lucide="credit-card" style="width:16px;height:16px;"></i> Pagamentos
        </a>
        <a href="{{ route('admin.settings.accounts.index') }}" class="settings-nav-link active">
            <i data-lucide="landmark" style="width:16px;height:16px;"></i> Contas Financeiras
        </a>
        <a href="{{ route('admin.settings.status-colors.index') }}" class="settings-nav-link">
            <i data-lucide="palette" style="width:16px;height:16px;"></i> Cores de Status
        </a>
    </nav>

    <div>
        @if(session('success'))
            <div class="alert alert-success mb-lg">{{ session('success') }}</div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger mb-lg">{{ session('error') }}</div>
        @endif

        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
            <div>
                <div style="font-size:15px;font-weight:700;">Contas Financeiras</div>
                <div style="font-size:12px;color:var(--color-text-muted);">{{ $accounts->count() }} conta(s) cadastrada(s)</div>
            </div>
            <a href="{{ route('admin.settings.accounts.create') }}" class="btn btn-primary">
                <i data-lucide="plus" style="width:14px;height:14px;"></i> Nova Conta
            </a>
        </div>

        @php
            $typeIcons = ['cash'=>'wallet','bank'=>'landmark','safe'=>'lock','other'=>'circle'];
            $typeLabels = \App\Models\FinancialAccount::TYPES;
        @endphp

        @forelse($accounts as $account)
        <div class="card mb-sm" style="display:flex;align-items:center;gap:16px;padding:16px 20px;">
            <div style="width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--color-primary) 10%,white);color:var(--color-primary);flex-shrink:0;">
                <i data-lucide="{{ $typeIcons[$account->type] ?? 'circle' }}" style="width:20px;height:20px;"></i>
            </div>
            <div style="flex:1;">
                <div style="font-weight:700;font-size:14px;">
                    {{ $account->name }}
                    @if($account->is_default)
                        <span class="badge badge-primary" style="margin-left:6px;font-size:10px;">Padrão</span>
                    @endif
                </div>
                <div style="font-size:12px;color:var(--color-text-muted);">{{ $typeLabels[$account->type] ?? $account->type }}</div>
            </div>
            <span class="badge {{ $account->is_active ? 'badge-success' : 'badge-secondary' }}">
                {{ $account->is_active ? 'Ativa' : 'Inativa' }}
            </span>
            <div class="flex gap-sm">
                <a href="{{ route('admin.settings.accounts.edit', $account) }}" class="btn btn-sm btn-ghost">
                    <i data-lucide="pencil" style="width:13px;height:13px;"></i>
                </a>
                <form action="{{ route('admin.settings.accounts.destroy', $account) }}" method="POST"
                      onsubmit="return confirm('Excluir conta? Só é possível se não houver movimentações.');">
                    @csrf @method('DELETE')
                    <button type="submit" class="btn btn-sm btn-ghost" style="color:var(--color-danger);">
                        <i data-lucide="trash-2" style="width:13px;height:13px;"></i>
                    </button>
                </form>
            </div>
        </div>
        @empty
        <div class="empty-state" style="padding:48px;">
            <div class="empty-state-icon">🏦</div>
            <div class="empty-state-title">Nenhuma conta cadastrada</div>
            <div class="empty-state-text">Cadastre as contas financeiras (caixa físico, banco, cofre) do hotel.</div>
            <a href="{{ route('admin.settings.accounts.create') }}" class="btn btn-primary mt-md">Cadastrar Primeira Conta</a>
        </div>
        @endforelse
    </div>
</div>
@endsection