@extends('layouts.admin')
@section('title', 'Notificações por E-mail')
@section('breadcrumb')
    <a class="breadcrumb-item" href="#">Configurações</a>
    <span class="breadcrumb-separator">/</span>
    <span class="breadcrumb-item active">Notificações</span>
@endsection

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title">Notificações por E-mail</h1>
        <p class="page-subtitle">Configure os e-mails automáticos enviados aos hóspedes.</p>
    </div>
</div>

<div style="display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start;">

    {{-- ─── Configurações ─── --}}
    <div>

        <form action="{{ route('admin.settings.notifications.update') }}" method="POST">
            @csrf @method('PUT')

            {{-- Notificações Ativas --}}
            <div class="card mb-lg">
                <div class="card-header" style="display:flex;align-items:center;gap:8px;font-weight:700;">
                    <i data-lucide="bell" style="width:16px;height:16px;color:var(--color-primary);"></i>
                    Notificações Automáticas
                </div>
                <div class="card-body">

                    @php
                    $notifs = [
                        [
                            'key'     => 'notify_reservation_confirmed',
                            'icon'    => 'check-circle',
                            'color'   => '#22c55e',
                            'title'   => 'Confirmação de Reserva',
                            'desc'    => 'Enviado imediatamente quando uma reserva é criada/confirmada.',
                            'badge'   => 'Automático',
                        ],
                        [
                            'key'     => 'notify_checkin_reminder',
                            'icon'    => 'calendar-check',
                            'color'   => '#6366f1',
                            'title'   => 'Lembrete de Check-in',
                            'desc'    => 'Enviado 24 horas antes da chegada do hóspede (diário às 10h).',
                            'badge'   => 'Agendado',
                        ],
                        [
                            'key'     => 'notify_checkout_receipt',
                            'icon'    => 'receipt',
                            'color'   => '#f59e0b',
                            'title'   => 'Extrato de Checkout',
                            'desc'    => 'Enviado automaticamente quando o check-out é realizado.',
                            'badge'   => 'Automático',
                        ],
                    ];
                    @endphp

                    @foreach($notifs as $n)
                    <div style="display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--border-color, #e5e7eb);">
                        <div style="display:flex;align-items:center;gap:14px;">
                            <div style="width:42px;height:42px;border-radius:10px;background:{{ $n['color'] }}18;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                <i data-lucide="{{ $n['icon'] }}" style="width:18px;height:18px;color:{{ $n['color'] }};"></i>
                            </div>
                            <div>
                                <div style="font-weight:700;font-size:.9rem;">
                                    {{ $n['title'] }}
                                    <span style="background:#ede9fe;color:#7c3aed;font-size:.6rem;font-weight:700;padding:2px 7px;border-radius:99px;margin-left:6px;text-transform:uppercase;">{{ $n['badge'] }}</span>
                                </div>
                                <div style="font-size:.78rem;color:#6b7280;margin-top:2px;">{{ $n['desc'] }}</div>
                            </div>
                        </div>
                        {{-- Toggle switch --}}
                        <label style="position:relative;width:46px;height:24px;cursor:pointer;flex-shrink:0;">
                            <input type="checkbox" name="{{ $n['key'] }}" value="1"
                                   @if($settings[$n['key']]) checked @endif
                                   style="opacity:0;width:0;height:0;position:absolute;">
                            <span style="position:absolute;inset:0;background:#d1d5db;border-radius:12px;transition:.2s;"
                                  onclick="this.previousElementSibling.checked=!this.previousElementSibling.checked;this.style.background=this.previousElementSibling.checked?'#6366f1':'#d1d5db';"
                                  style="background:{{ $settings[$n['key']] ? '#6366f1' : '#d1d5db' }};">
                            </span>
                        </label>
                    </div>
                    @endforeach

                    <div style="padding-top:16px;">
                        <button type="submit" class="btn btn-primary">
                            <i data-lucide="save" style="width:14px;height:14px;"></i> Salvar Configurações
                        </button>
                    </div>
                </div>
            </div>
        </form>

        {{-- SMTP --}}
        <form action="{{ route('admin.settings.notifications.update') }}" method="POST">
            @csrf @method('PUT')
            <div class="card">
                <div class="card-header" style="display:flex;align-items:center;gap:8px;font-weight:700;">
                    <i data-lucide="server" style="width:16px;height:16px;color:var(--color-primary);"></i>
                    Configurações SMTP
                    <span style="font-size:.72rem;color:#6b7280;font-weight:400;margin-left:4px;">(opcional — usa o padrão do sistema se vazio)</span>
                </div>
                <div class="card-body">
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
                        <div>
                            <label class="form-label">Host SMTP</label>
                            <input type="text" name="smtp_host" value="{{ $settings['smtp_host'] }}" class="form-control" placeholder="smtp.gmail.com">
                        </div>
                        <div>
                            <label class="form-label">Porta</label>
                            <input type="number" name="smtp_port" value="{{ $settings['smtp_port'] }}" class="form-control" placeholder="587">
                        </div>
                        <div>
                            <label class="form-label">Usuário SMTP</label>
                            <input type="text" name="smtp_user" value="{{ $settings['smtp_user'] }}" class="form-control" placeholder="seu@email.com">
                        </div>
                        <div>
                            <label class="form-label">Senha SMTP</label>
                            <input type="password" name="smtp_password" class="form-control" placeholder="Deixe em branco para manter">
                        </div>
                        <div>
                            <label class="form-label">Nome do Remetente</label>
                            <input type="text" name="smtp_from_name" value="{{ $settings['smtp_from_name'] }}" class="form-control">
                        </div>
                        <div>
                            <label class="form-label">E-mail do Remetente</label>
                            <input type="email" name="smtp_from_email" value="{{ $settings['smtp_from_email'] }}" class="form-control">
                        </div>
                    </div>
                    <div style="margin-top:16px;">
                        <button type="submit" class="btn btn-primary">
                            <i data-lucide="save" style="width:14px;height:14px;"></i> Salvar SMTP
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    {{-- ─── Sidebar: Teste + Info ─── --}}
    <div>

        {{-- Enviar email de teste --}}
        <div class="card mb-md">
            <div class="card-header" style="font-weight:700;display:flex;align-items:center;gap:8px;">
                <i data-lucide="send" style="width:15px;height:15px;color:#6366f1;"></i>
                Testar E-mail
            </div>
            <div class="card-body">
                <form action="{{ route('admin.settings.notifications.test') }}" method="POST">
                    @csrf
                    <div style="margin-bottom:12px;">
                        <label class="form-label">Endereço de Teste</label>
                        <input type="email" name="test_email" value="{{ auth()->user()->email }}" class="form-control" required>
                    </div>
                    <button type="submit" class="btn btn-secondary" style="width:100%;">
                        <i data-lucide="mail" style="width:14px;height:14px;"></i>
                        Enviar E-mail de Confirmação de Teste
                    </button>
                </form>
                <p style="font-size:.72rem;color:#9ca3af;margin-top:10px;line-height:1.5;">
                    💡 Em ambiente local com <code>MAIL_MAILER=log</code>, o e-mail fica salvo em <code>storage/logs/laravel.log</code>.
                    Para usar Gmail ou outro SMTP, configure acima.
                </p>
            </div>
        </div>

        {{-- Status do Mailer --}}
        <div class="card">
            <div class="card-header" style="font-weight:700;display:flex;align-items:center;gap:8px;">
                <i data-lucide="info" style="width:15px;height:15px;"></i>
                Status do Sistema de E-mail
            </div>
            <div class="card-body" style="font-size:.82rem;">
                @php
                $mailer = config('mail.default');
                $mailerColors = ['log'=>'#f59e0b', 'smtp'=>'#22c55e', 'mailgun'=>'#3b82f6'];
                $c = $mailerColors[$mailer] ?? '#6b7280';
                @endphp
                <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
                    <div style="width:10px;height:10px;border-radius:50%;background:{{ $c }};"></div>
                    <strong>Mailer ativo:</strong>
                    <span style="background:{{ $c }}18;color:{{ $c }};font-weight:700;padding:2px 8px;border-radius:99px;font-size:.72rem;text-transform:uppercase;">
                        {{ strtoupper($mailer) }}
                    </span>
                </div>
                <div style="color:#6b7280;font-size:.78rem;line-height:1.8;">
                    <div><strong>From:</strong> {{ config('mail.from.address') }}</div>
                    <div><strong>Host:</strong> {{ config('mail.mailers.smtp.host', '—') }}</div>
                    <div><strong>Porta:</strong> {{ config('mail.mailers.smtp.port', '—') }}</div>
                </div>
                @if($mailer === 'log')
                <div style="background:#fef3c7;border:1px solid #fde68a;border-radius:8px;padding:10px;margin-top:12px;font-size:.76rem;color:#92400e;">
                    ⚠ Mailer em modo <strong>LOG</strong>. Os e-mails não são enviados — verifique <code>storage/logs/laravel.log</code>.
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Animação nos toggles
document.querySelectorAll('input[type="checkbox"]').forEach(cb => {
    const span = cb.nextElementSibling;
    if(span) {
        span.style.background = cb.checked ? '#6366f1' : '#d1d5db';
        cb.addEventListener('change', () => {
            span.style.background = cb.checked ? '#6366f1' : '#d1d5db';
        });
    }
});
</script>
@endpush
@endsection