@extends('layouts.admin')
@section('title', 'Métodos de Pagamento — 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">Métodos de Pagamento</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; } }

.pm-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    transition: box-shadow 0.15s;
}
.pm-card:hover { box-shadow: var(--shadow-md); }
.pm-icon {
    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;
}
.pm-name { font-weight: 700; font-size: 14px; }
.pm-type { font-size: 12px; color: var(--color-text-muted); }
.pm-toggle { --toggle-size: 40px; }
</style>
@endpush

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Configurações</h1>
        <p class="page-subtitle">Gerencie os métodos de pagamento aceitos pelo 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 active">
            <i data-lucide="credit-card" style="width:16px;height:16px;"></i> Pagamentos
        </a>
        <a href="{{ route('admin.settings.accounts.index') }}" class="settings-nav-link">
            <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;">Métodos de Pagamento</div>
                <div style="font-size:12px;color:var(--color-text-muted);">{{ $methods->count() }} método(s) configurado(s)</div>
            </div>
            <a href="{{ route('admin.settings.payment-methods.create') }}" class="btn btn-primary">
                <i data-lucide="plus" style="width:14px;height:14px;"></i> Novo Método
            </a>
        </div>

        @php
            $icons = ['cash'=>'banknote','pix'=>'qr-code','credit_card'=>'credit-card','debit_card'=>'credit-card','transfer'=>'arrow-right-left','courtesy'=>'gift','invoice'=>'file-text'];
            $labels = \App\Models\PaymentMethod::TYPES;
        @endphp

        @forelse($methods as $method)
        <div class="pm-card mb-sm" id="pm-row-{{ $method->id }}">
            <div class="pm-icon">
                <i data-lucide="{{ $icons[$method->type] ?? 'circle-dollar-sign' }}" style="width:20px;height:20px;"></i>
            </div>
            <div style="flex:1;">
                <div class="pm-name">{{ $method->name }}</div>
                <div class="pm-type">
                    {{ $labels[$method->type] ?? $method->type }}
                    @if($method->requires_change)
                        &nbsp;·&nbsp;<span style="color:var(--color-warning);font-size:11px;">Requer troco</span>
                    @endif
                </div>
            </div>

            {{-- Toggle ativo/inativo --}}
            <div style="display:flex;align-items:center;gap:8px;">
                <span id="pm-status-{{ $method->id }}" style="font-size:11px;font-weight:600;color:{{ $method->is_active ? 'var(--color-success)' : 'var(--color-text-muted)' }}">
                    {{ $method->is_active ? 'Ativo' : 'Inativo' }}
                </span>
                <label class="toggle-switch" title="{{ $method->is_active ? 'Desativar' : 'Ativar' }}">
                    <input type="checkbox" {{ $method->is_active ? 'checked' : '' }}
                           onchange="toggleMethod({{ $method->id }}, this)">
                    <span class="toggle-slider"></span>
                </label>
            </div>

            <div class="flex gap-sm">
                <a href="{{ route('admin.settings.payment-methods.edit', $method) }}" class="btn btn-sm btn-ghost">
                    <i data-lucide="pencil" style="width:13px;height:13px;"></i>
                </a>
                <form action="{{ route('admin.settings.payment-methods.destroy', $method) }}" method="POST"
                      onsubmit="return confirm('Excluir método? Esta ação não pode ser desfeita.');">
                    @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">Nenhum método cadastrado</div>
            <div class="empty-state-text">Cadastre os meios de pagamento que seu hotel aceita.</div>
            <a href="{{ route('admin.settings.payment-methods.create') }}" class="btn btn-primary mt-md">Cadastrar Primeiro Método</a>
        </div>
        @endforelse
    </div>
</div>

@push('scripts')
<script>
async function toggleMethod(id, checkbox) {
    const resp = await fetch(`/admin/settings/payment-methods/${id}/toggle`, {
        method: 'PATCH',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' }
    });
    const data = await resp.json();
    const statusEl = document.getElementById('pm-status-' + id);
    statusEl.textContent  = data.label;
    statusEl.style.color  = data.is_active ? 'var(--color-success)' : 'var(--color-text-muted)';
}
</script>
@endpush
@endsection