@extends('admin.base-admin')
@section('page_title', 'Emails | Admin')

@section('nav')
    @include('admin.partials.nav-dynamic')
@endsection

@section('page-header')
    <h1>
        <i class="bi bi-envelope-fill mr-2" style="font-size:1.1rem;color:#4d7cf5;"></i>
        E-mails
    </h1>
@endsection

@section('styles')
<style>
    .tr-header.email-header,
    .tr-row.email-row {
        grid-template-columns: 1fr 260px 200px 52px;
    }
    .tr-row.email-row { cursor: default; }
    .tr-row.email-row:hover { background: var(--dm-surface-2); }
    .tr-row.email-row .tc-name { font-weight: 400; }
    .saas-empty.hidden { display: none !important; }
</style>
@endsection

@section('content')
<div class="container-fluid mt-2">

    {{-- ── Toolbar ── --}}
    <div class="saas-toolbar mb-3">

        <div style="position:relative;display:flex;align-items:center;">
            <i class="bi bi-search"
               style="position:absolute;left:10px;font-size:.8rem;color:var(--dm-text-muted);pointer-events:none;"></i>
            <input id="email-search" class="ramal-search" type="text"
                   placeholder="Nome, e-mail ou setor..." autocomplete="off">
        </div>

        <a class="saas-btn primary" data-toggle="modal" data-target="#modalAddEmail"
           style="text-decoration:none;margin-left:auto;">
            <i class="bi bi-plus-lg"></i> Novo e-mail
        </a>

    </div>

    {{-- ── Cabeçalho ── --}}
    <div class="tr-header email-header">
        <div class="tc">Nome</div>
        <div class="tc">E-mail</div>
        <div class="tc">Setor</div>
        <div class="tc"></div>
    </div>

    {{-- ── Linhas ── --}}
    <div id="lista-emails">
        @forelse($emails as $item)
        <div class="tr-row email-row item_email"
             data-name="{{ strtolower($item->name) }}"
             data-email="{{ strtolower($item->email) }}"
             data-setor="{{ strtolower($item->department ?? '') }}">

            <div class="tc tc-name">
                <i class="bi bi-person-circle" style="color:var(--dm-accent);font-size:1rem;flex-shrink:0;"></i>
                {{ $item->name }}
            </div>
            <div class="tc tc-email">{{ $item->email }}</div>
            <div class="tc tc-setor">{{ $item->department ?? '—' }}</div>
            <div class="tc tc-actions">
                <div class="dropdown" style="position:relative;">
                    <button class="dots-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="bi bi-three-dots-vertical"></i>
                    </button>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" style="cursor:pointer;"
                           data-toggle="modal" data-target="#modalEdit{{ $item->id }}">
                            <i class="bi bi-pencil mr-2"></i> Editar
                        </a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" style="color:#e05252!important;cursor:pointer;"
                           onclick="confirmarRemocao({{ $item->id }}, '{{ addslashes($item->name) }}', '{{ addslashes($item->email) }}')">
                            <i class="bi bi-trash3 mr-2"></i> Remover
                        </a>
                    </div>
                </div>
            </div>

        </div>
        @empty
        <div class="saas-empty">
            <i class="bi bi-envelope-x" style="font-size:2rem;display:block;margin-bottom:.5rem;"></i>
            Nenhum e-mail cadastrado.
        </div>
        @endforelse
    </div>

    <div id="email-no-result" class="saas-empty hidden">
        <i class="bi bi-search" style="font-size:2rem;display:block;margin-bottom:.5rem;"></i>
        Nenhum resultado encontrado.
    </div>

</div>

{{-- ═══════════════════ MODAL — Novo ═══════════════════ --}}
<div class="modal fade" id="modalAddEmail" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">

            <div class="modal-header conteudo-modal-header">
                <h5 style="font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin:0;color:var(--dm-text-muted);">
                    <i class="bi bi-plus-circle mr-2" style="color:var(--dm-accent);"></i> Novo E-mail
                </h5>
                <button class="close" data-dismiss="modal"><span>&times;</span></button>
            </div>

            <form action="{{ route('emails.store') }}" method="POST">
                @csrf
                <div class="modal-body">

                    <div class="form-group mb-3">
                        <label>Nome</label>
                        <input type="text" class="form-control" name="name" required>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label>E-mail</label>
                                <input type="email" class="form-control" name="email" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label>Setor</label>
                                <select class="form-control" name="department" required>
                                    <option value="">Selecione</option>
                                    @foreach($setores as $id => $nome)
                                        <option value="{{ $nome }}">{{ $nome }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="saas-btn" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="saas-btn primary" style="margin-left:auto;">
                        <i class="bi bi-check-lg mr-1"></i> Salvar
                    </button>
                </div>
            </form>

        </div>
    </div>
</div>

{{-- ═══════════════════ MODAIS — Editar ═══════════════════ --}}
@foreach($emails as $item)
<div class="modal fade" id="modalEdit{{ $item->id }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">

            <div class="modal-header conteudo-modal-header">
                <h5 style="font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin:0;color:var(--dm-text-muted);">
                    <i class="bi bi-pencil-square mr-2" style="color:var(--dm-accent);"></i> Editar E-mail
                </h5>
                <button class="close" data-dismiss="modal"><span>&times;</span></button>
            </div>

            <form id="editForm{{ $item->id }}"
                  action="{{ route('emails.update', $item->id) }}" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body">

                    <div class="form-group mb-3">
                        <label>Nome</label>
                        <input type="text" class="form-control" name="name"
                               value="{{ $item->name }}" required>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label>E-mail</label>
                                <input type="email" class="form-control" name="email"
                                       value="{{ $item->email }}" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label>Setor</label>
                                <select class="form-control" name="department">
                                    @foreach($setores as $sid => $nome)
                                        <option value="{{ $nome }}" {{ $item->department == $nome ? 'selected' : '' }}>
                                            {{ $nome }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                </div>
            </form>

            <div class="modal-footer">
                <button type="button" class="saas-btn" data-dismiss="modal">Cancelar</button>
                <button type="submit" form="editForm{{ $item->id }}"
                        class="saas-btn primary" style="margin-left:auto;">
                    <i class="bi bi-check-lg mr-1"></i> Salvar
                </button>
            </div>

        </div>
    </div>
</div>
@endforeach

{{-- ═══════════════════ MODAL — Confirmar exclusão ═══════════════════ --}}
<div class="modal fade" id="modalConfirmDelete" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog" style="max-width:360px;margin-top:80px;">
        <div class="modal-content">

            <div class="modal-header conteudo-modal-header">
                <h5 style="font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin:0;color:var(--dm-text-muted);">
                    <i class="bi bi-exclamation-triangle mr-2" style="color:#e05252;"></i> Confirmar remoção
                </h5>
                <button class="close" data-dismiss="modal"><span>&times;</span></button>
            </div>

            <div class="modal-body text-center" style="padding:1.5rem 1.25rem;">
                <p style="font-size:.9rem;color:var(--dm-text);">
                    Remover o e-mail de <strong id="confirm-nome"></strong>?
                </p>
                <p style="font-size:.88rem;font-family:'Courier New',monospace;color:var(--dm-accent);margin:.25rem 0 .75rem;">
                    <span id="confirm-email"></span>
                </p>
                <p style="font-size:.78rem;color:#e05252;">Esta ação é irreversível.</p>
            </div>

            <form id="deleteForm" method="POST">
                @csrf
                @method('DELETE')
                <div class="modal-footer" style="justify-content:space-between;">
                    <button type="button" class="saas-btn" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="saas-btn"
                            style="background:#e05252;border-color:#c94040;color:#fff;">
                        <i class="bi bi-trash3 mr-1"></i> Sim, remover
                    </button>
                </div>
            </form>

        </div>
    </div>
</div>

<div class="text-center p-4 page-footer-divider">
    © 2022 Desenvolvido por Casas da Água
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function () {
    $('#email-search').on('input', filtrar);

    function filtrar() {
        var q = $('#email-search').val().toLowerCase().trim();
        var n = 0;

        $('.item_email').each(function () {
            var nome  = String($(this).data('name')  || '');
            var email = String($(this).data('email') || '');
            var setor = String($(this).data('setor') || '');
            var ok = !q || nome.includes(q) || email.includes(q) || setor.includes(q);
            $(this).toggle(ok);
            if (ok) n++;
        });

        $('#email-no-result').toggleClass('hidden', n > 0);
    }
});

function confirmarRemocao(id, nome, email) {
    var url = '{{ route('emails.destroy', ['id' => 'PLACEHOLDER']) }}'.replace('PLACEHOLDER', id);
    $('#deleteForm').attr('action', url);
    $('#confirm-nome').text(nome);
    $('#confirm-email').text(email);
    $('#modalConfirmDelete').modal('show');
}
</script>
@endsection