@extends('admin.base-admin')

@section('page_title', 'Ramais | Admin')

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

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


@section('styles')
<style>
    .tr-header.ramal-header,
    .tr-row.ramal-row {
        grid-template-columns: 1fr 120px 220px 52px;
    }
    .tr-row.ramal-row { cursor: default; }
    .tr-row.ramal-row:hover { background: var(--dm-surface-2); }
    .tr-row.ramal-row .tc-name  { font-weight: 400; }
    .tr-row.ramal-row .tc-ramal { 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="ramal-search" class="ramal-search" type="text"
                   placeholder="Nome, ramal ou setor..." autocomplete="off">
        </div>

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

    </div>

    {{-- ── Cabeçalho ── --}}
    <div class="tr-header ramal-header">
        <div class="tc">Nome</div>
        <div class="tc">Ramal</div>
        <div class="tc">Setor</div>
        <div class="tc"></div>
    </div>

    {{-- ── Linhas ── --}}
    <div id="lista-ramais">
        @forelse($ramais as $r)
        <div class="tr-row ramal-row item_ramal"
             data-name="{{ strtolower($r->nome) }}"
             data-ramal="{{ strtolower($r->ramal) }}"
             data-setor="{{ strtolower($r->setor) }}">

            <div class="tc tc-name">
                <i class="bi bi-person-circle" style="color:var(--dm-accent);font-size:1rem;flex-shrink:0;"></i>
                {{ $r->nome }}
            </div>
            <div class="tc tc-ramal">{{ $r->ramal }}</div>
            <div class="tc tc-setor">{{ $r->setor }}</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="#modalEdita{{ $r->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({{ $r->id }}, '{{ addslashes($r->nome) }}', '{{ $r->ramal }}')">
                            <i class="bi bi-trash3 mr-2"></i> Remover
                        </a>
                    </div>
                </div>
            </div>

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

    <div id="ramal-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="modalAddRamal" 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 Ramal
                </h5>
                <button class="close" data-dismiss="modal"><span>&times;</span></button>
            </div>

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

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

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label>Ramal</label>
                                <input class="form-control" name="ramal" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label>Setor</label>
                                <select class="form-control" name="setor" 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($ramais as $r)
<div class="modal fade" id="modalEdita{{ $r->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 Ramal
                </h5>
                <button class="close" data-dismiss="modal"><span>&times;</span></button>
            </div>

            <form id="editForm{{ $r->id }}"
                  action="{{ route('admin.ramais.update', $r->id) }}" method="post">
                @csrf
                <div class="modal-body">

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

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label>Ramal</label>
                                <input class="form-control" name="ramal" value="{{ $r->ramal }}" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label>Setor</label>
                                <select class="form-control" name="setor">
                                    @foreach($setores as $sid => $nome)
                                        <option value="{{ $nome }}" {{ $r->setor == $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{{ $r->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 ramal de <strong id="confirm-nome"></strong>?
                </p>
                <p style="font-size:2rem;font-family:'Courier New',monospace;font-weight:700;color:var(--dm-accent);margin:.25rem 0 .5rem;">
                    <span id="confirm-ramal"></span>
                </p>
                <p style="font-size:.78rem;color:#e05252;">Esta ação é irreversível.</p>
            </div>

            <form id="deleteForm" method="post">
                @csrf
                <input type="hidden" name="_method" value="POST">
                <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 () {
    $('#ramal-search').on('input', filtrar);

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

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

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

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