@extends('welcome')
@section('page_title', 'Acompanhamento')

<style>
/* ── Acompanhamento page ── */
.acomp-wrap {
    max-width: 1440px;
    margin: 2.5rem auto;
    padding: 0 2rem 4rem;
}

.acomp-page-header {
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--dm-border);
}

.acomp-page-header p {
    font-size: .78rem;
    color: var(--dm-text-muted);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 .2rem;
}

.acomp-page-header h1 {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--dm-text);
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

/* ── Grid: id | title | status | dates | actions ── */
.acomp-tr-header,
.acomp-tr-row {
    display: grid;
    grid-template-columns: 60px 1fr 170px 130px 52px;
    align-items: center;
    padding: 0 1rem;
    gap: 0;
}

.acomp-tr-header {
    height: 42px;
    background: var(--dm-surface);
    border: 1px solid var(--dm-border);
    border-radius: 10px 10px 0 0;
}

.acomp-tr-header .tc {
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--dm-text-muted);
    display: flex;
    align-items: center;
}

.acomp-tr-row {
    min-height: 68px;
    background: var(--dm-surface);
    border: 1px solid var(--dm-border);
    border-top: none;
    position: relative;
    cursor: pointer;
    transition: background .12s;
}

.acomp-tr-row:last-of-type { border-radius: 0 0 10px 10px; }
.acomp-tr-row:hover { background: var(--dm-surface-2); }

/* ── Cells ── */
.tc {
    padding: .65rem .5rem;
    display: flex;
    align-items: center;
}

.tc-id { justify-content: center; }

.acomp-ticket-id {
    font-size: .84rem;
    font-weight: 700;
    color: #e6ab09;
    font-family: 'Courier New', monospace;
}

.tc-title { padding-right: .75rem; }

.acomp-ticket-title {
    font-size: .96rem;
    font-weight: 500;
    color: var(--dm-text);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    cursor: pointer;
}

.acomp-ticket-title:hover { color: var(--dm-accent) !important; }

/* Category badges */
.cat-badge {
    display: inline-block;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .4px;
    padding: 2px 7px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 25px;
    white-space: nowrap;
    flex-shrink: 0;
}

.cat-ti        { background: #4164c4; color: #fff; }
.cat-logistica { background: #f58122; color: #fff; }
.cat-rh        { background: #8f3fd1; color: #fff; }
.cat-dev       { background: #16a34a; color: #fff; }

/* Dates cell */
.tc-dates {
    flex-direction: column;
    align-items: flex-start;
    gap: .18rem;
}

.acomp-date-row {
    display: flex;
    gap: .35rem;
    align-items: center;
}

.acomp-date-label {
    font-size: .68rem;
    color: var(--dm-text-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    min-width: 36px;
}

.acomp-date-val {
    font-size: .82rem;
    color: var(--dm-text);
    font-weight: 500;
}

/* Actions cell */
.tc-actions { justify-content: center; }

.acomp-action-btn {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--dm-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .9rem;
    padding: 0;
    text-decoration: none;
}

.acomp-action-btn:hover {
    background: var(--dm-surface-2);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

/* saas-badge overrides — slightly larger text */
.saas-badge { font-size: .76rem; height: 26px; line-height: 26px; }

/* Empty state */
.acomp-empty {
    padding: 5rem 0;
    text-align: center;
    color: var(--dm-text-muted);
}

.acomp-empty h2 { font-size: 1.3rem; font-weight: 600; color: var(--dm-text); }
.acomp-empty p  { font-size: .9rem; margin-top: .4rem; }

/* ── Filter bar ── */
.acomp-filterbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.acomp-filterbar .divider {
    width: 1px;
    height: 22px;
    background: var(--dm-border);
    margin: 0 .25rem;
}

.acomp-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .75rem;
    border-radius: 6px;
    border: 1px solid var(--dm-border);
    background: var(--dm-surface);
    color: var(--dm-text-muted);
    font-size: .78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .12s;
    line-height: 1;
    height: 30px;
    white-space: nowrap;
}

.acomp-filter-btn:hover {
    background: var(--dm-surface-2);
    color: var(--dm-text);
    border-color: var(--dm-border);
}

.acomp-filter-btn.active {
    background: var(--dm-surface-2);
    border-color: var(--dm-accent, #4d7cf5);
    color: var(--dm-accent, #4d7cf5);
}

.acomp-filter-btn.active.btn-ti     { border-color: #4d7cf5; color: #4d7cf5; }
.acomp-filter-btn.active.btn-log    { border-color: #c2690f; color: #c2690f; }
.acomp-filter-btn.active.btn-rh     { border-color: #a855f7; color: #a855f7; }
.acomp-filter-btn.active.btn-dev    { border-color: #16a34a; color: #16a34a; }
.acomp-filter-btn.active.btn-sol    { border-color: #22c97b; color: #22c97b; }
.acomp-filter-btn.active.btn-open   { border-color: #22c97b; color: #22c97b; }

.acomp-no-results {
    padding: 3rem 0;
    text-align: center;
    color: var(--dm-text-muted);
    font-size: .9rem;
    display: none;
}

/* ── Layout: sidebar de filial + conteúdo ── */
.acomp-layout {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.acomp-main { flex: 1 1 auto; min-width: 0; }

.acomp-sidebar {
    flex: 0 0 220px;
    position: sticky;
    top: 1.5rem;
    background: var(--dm-surface);
    border: 1px solid var(--dm-border);
    border-radius: 10px;
    padding: .85rem .7rem;
}

.acomp-sidebar-title {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--dm-text-muted);
    padding: 0 .35rem .55rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.acomp-fil-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: .5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--dm-border, #cbd5e1) transparent;
}

.acomp-fil-list::-webkit-scrollbar { width: 5px; }
.acomp-fil-list::-webkit-scrollbar-track { background: transparent; }
.acomp-fil-list::-webkit-scrollbar-thumb {
    background: var(--dm-border, #cbd5e1);
    border-radius: 4px;
}
.acomp-fil-list::-webkit-scrollbar-thumb:hover {
    background: var(--dm-text-muted, #94a3b8);
}

.acomp-fil-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    text-align: left;
    padding: .42rem .55rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--dm-text-muted);
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .12s;
    line-height: 1.2;
}

.acomp-fil-item:hover { background: var(--dm-surface-2); color: var(--dm-text); }

.acomp-fil-item.active {
    background: var(--dm-surface-2);
    border-color: var(--dm-accent, #4d7cf5);
    color: var(--dm-accent, #4d7cf5);
}

.acomp-fil-item i { font-size: .8rem; flex-shrink: 0; }
.acomp-fil-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Barra de origem (topo da tabela) ── */
.acomp-origem-bar {
    display: inline-flex;
    padding: 3px;
    gap: 3px;
    background: var(--dm-surface);
    border: 1px solid var(--dm-border);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.acomp-origem-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .8rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--dm-text-muted);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .12s;
    line-height: 1;
    white-space: nowrap;
}

.acomp-origem-btn:hover { color: var(--dm-text); }

.acomp-origem-btn.active {
    background: var(--dm-surface-2);
    color: var(--dm-accent, #4d7cf5);
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

@media (max-width: 860px) {
    .acomp-layout { flex-direction: column; }
    .acomp-sidebar {
        position: static;
        flex-basis: auto;
        width: 100%;
    }
    .acomp-fil-list {
        flex-direction: row;
        flex-wrap: wrap;
        max-height: none;
    }
    .acomp-fil-item { width: auto; }
}
</style>

@section('conteudo')

<div class="acomp-wrap">

    <div class="acomp-page-header">
        <p>Acompanhamento</p>
        <h1>Seus Chamados</h1>
    </div>

    @if ($availableTypes->isNotEmpty())

        @php
            $showSidebar = $availableFiliais->count() > 1;
            $showOrigem  = ($isMatrizResponsavel ?? false) || ($isGerente ?? false);
        @endphp

        <div class="acomp-layout">

            @if ($showSidebar)
            {{-- Sidebar de filial --}}
            <aside class="acomp-sidebar">
                <div class="acomp-sidebar-title">
                    <i class="bi bi-geo-alt"></i> Filial
                </div>
                <div class="acomp-fil-list">
                    <button class="acomp-fil-item {{ $filial === 'all' ? 'active' : '' }}" data-filter="filial" data-value="all">
                        <i class="bi bi-buildings"></i> <span>Todas as filiais</span>
                    </button>
                    @foreach ($availableFiliais as $filId => $filNome)
                    <button class="acomp-fil-item {{ (string) $filial === (string) $filId ? 'active' : '' }}" data-filter="filial" data-value="{{ $filId }}">
                        <i class="bi bi-shop"></i> <span>{{ $filNome ?: ('Filial ' . $filId) }}</span>
                    </button>
                    @endforeach
                </div>
            </aside>
            @endif

            <div class="acomp-main">

                {{-- Filter bar --}}
                <div class="acomp-filterbar">
                    <button class="acomp-filter-btn {{ $sector === 'all' ? 'active' : '' }} btn-all" data-filter="sector" data-value="all">
                        <i class="bi bi-list-ul"></i> Todos
                    </button>
                    @if ($availableTypes->contains('ti'))
                    <button class="acomp-filter-btn {{ $sector === 'ti' ? 'active' : '' }} btn-ti" data-filter="sector" data-value="ti">
                        <i class="bi bi-pc-display"></i> Tecnologia
                    </button>
                    @endif
                    @if ($availableTypes->contains('logistica'))
                    <button class="acomp-filter-btn {{ $sector === 'logistica' ? 'active' : '' }} btn-log" data-filter="sector" data-value="logistica">
                        <i class="bi bi-truck"></i> Logística
                    </button>
                    @endif
                    @if ($availableTypes->contains('rh'))
                    <button class="acomp-filter-btn {{ $sector === 'rh' ? 'active' : '' }} btn-rh" data-filter="sector" data-value="rh">
                        <i class="bi bi-people"></i> RH
                    </button>
                    @endif
                    @if ($availableTypes->contains('dev'))
                    <button class="acomp-filter-btn {{ $sector === 'dev' ? 'active' : '' }} btn-dev" data-filter="sector" data-value="dev">
                        <i class="bi bi-code-slash"></i> Dev
                    </button>
                    @endif

                    <div class="divider"></div>

                    <button class="acomp-filter-btn {{ $solved === 'open' ? 'active' : '' }} btn-open" data-filter="solved" data-value="open">
                        <i class="bi bi-envelope-open"></i> Em aberto
                    </button>
                    <button class="acomp-filter-btn {{ $solved === 'solved' ? 'active' : '' }} btn-sol" data-filter="solved" data-value="solved">
                        <i class="bi bi-check-circle"></i> Solucionados
                    </button>
                </div>

                @if ($showOrigem)
                {{-- Origem (topo da tabela): meus chamados x escopo gerencial --}}
                <div class="acomp-origem-bar">
                    <button class="acomp-origem-btn {{ $origem === 'all' ? 'active' : '' }}" data-filter="origem" data-value="all">
                        <i class="bi bi-collection"></i> Todos
                    </button>
                    <button class="acomp-origem-btn {{ $origem === 'meus' ? 'active' : '' }}" data-filter="origem" data-value="meus">
                        <i class="bi bi-person"></i> Meus chamados
                    </button>
                    @if ($isMatrizResponsavel ?? false)
                    <button class="acomp-origem-btn {{ $origem === 'setor' ? 'active' : '' }}" data-filter="origem" data-value="setor">
                        <i class="bi bi-diagram-3"></i> Chamados do setor
                    </button>
                    @endif
                    @if ($isGerente ?? false)
                    <button class="acomp-origem-btn {{ $origem === 'loja' ? 'active' : '' }}" data-filter="origem" data-value="loja">
                        <i class="bi bi-shop"></i> Chamados da loja
                    </button>
                    @endif
                </div>
                @endif

                <div id="acomp-list-wrap">
                    @include('pages.acompanhamento._list', compact('chamados', 'isGerente'))
                </div>

            </div>

        </div>

    @else

        <div class="acomp-empty">
            <i class="bi bi-inbox" style="font-size:3rem; opacity:.3;"></i>
            <h2 class="mt-3">Você não possui chamados</h2>
            <p>Seus chamados aparecerão aqui assim que forem abertos.</p>
        </div>

    @endif

</div>

<script>
window.addEventListener('jquery-ready', function () {
    var listUrl       = '{{ url('/acompanhamento') }}';
    var currentSector = '{{ $sector ?? 'all' }}';
    var currentSolved = '{{ $solved ?? 'open' }}';
    var currentOrigem = '{{ $origem ?? 'all' }}';
    var currentFilial = '{{ $filial ?? 'all' }}';

    function loadList(page) {
        var params = {
            sector: currentSector,
            solved: currentSolved,
            origem: currentOrigem,
            filial: currentFilial
        };
        if (page) params.page = page;

        $('#acomp-list-wrap').css('opacity', '.5');
        $.get(listUrl, params, function (html) {
            $('#acomp-list-wrap').html(html).css('opacity', '');
            var qs = $.param(params);
            window.history.replaceState(null, '', listUrl + (qs ? '?' + qs : ''));
        }).fail(function () {
            $('#acomp-list-wrap').css('opacity', '');
        });
    }

    $(document).on('click', '.acomp-filter-btn, .acomp-origem-btn, .acomp-fil-item', function () {
        var btn        = $(this);
        var filterType = btn.data('filter');
        var filterVal  = btn.data('value');

        if (filterType === 'sector') {
            currentSector = filterVal;
            $('[data-filter="sector"]').removeClass('active');
        } else if (filterType === 'solved') {
            currentSolved = filterVal;
            $('[data-filter="solved"]').removeClass('active');
        } else if (filterType === 'origem') {
            currentOrigem = filterVal;
            $('[data-filter="origem"]').removeClass('active');
        } else if (filterType === 'filial') {
            currentFilial = filterVal;
            $('[data-filter="filial"]').removeClass('active');
        }
        btn.addClass('active');

        loadList();
    });

    $(document).on('click', '#acomp-list-wrap .saas-page-link', function (e) {
        var href = $(this).attr('href');
        if (!href) return;
        e.preventDefault();
        var page = new URLSearchParams(href.split('?')[1] || '').get('page');
        loadList(page);
    });

    document.addEventListener('keydown', function (e) {
        if (e.target.classList.contains('reply-textarea') && e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            var form = e.target.closest('form');
            if (form) form.requestSubmit();
        }
    });
});
</script>

{{-- Modal único carregado via AJAX --}}
<div class="modal fade" id="modalAcompUser" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content" id="acompModalContent">
            <div style="display:flex;align-items:center;justify-content:center;min-height:260px;">
                <div class="spinner-border text-secondary" role="status" style="width:2rem;height:2rem;">
                    <span class="sr-only">Carregando...</span>
                </div>
            </div>
        </div>
    </div>
</div>

@include('partials._img_viewer')

<script>
window.addEventListener('jquery-ready', function () {
    var modalUrl = '{{ url('/acompanhamento/chamado') }}';

    $(document).on('click', '.acomp-open-modal', function () {
        var id = $(this).data('chamado-id');
        $('#acompModalContent').html(
            '<div style="display:flex;align-items:center;justify-content:center;min-height:260px;">' +
            '<div class="spinner-border text-secondary" role="status" style="width:2rem;height:2rem;"></div>' +
            '</div>'
        );
        $('#modalAcompUser').modal('show');
        $.get(modalUrl + '/' + id, function (html) {
            $('#acompModalContent').html(html);
        }).fail(function () {
            $('#acompModalContent').html(
                '<div class="modal-body text-center py-5" style="color:var(--dm-text-muted);">' +
                '<i class="bi bi-exclamation-triangle" style="font-size:2rem;"></i>' +
                '<p class="mt-2">Erro ao carregar o chamado.</p></div>'
            );
        });
    });

    $('#modalAcompUser').on('hidden.bs.modal', function () {
        $('#acompModalContent').html(
            '<div style="display:flex;align-items:center;justify-content:center;min-height:260px;">' +
            '<div class="spinner-border text-secondary" role="status" style="width:2rem;height:2rem;"></div>' +
            '</div>'
        );
    });
});
</script>

@if (session('etiqueta_chamado_id'))
{{-- Modal: Deseja imprimir etiqueta de envio? --}}
<div class="modal fade" id="modalEtiquetaFilial" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered" role="document" style="max-width:440px;">
        <div class="modal-content" style="border-radius:14px; overflow:hidden;">
            <div class="modal-body text-center" style="padding:2.2rem 2rem 1.5rem;">
                <div style="font-size:2.4rem; margin-bottom:.75rem;">📦</div>
                <h5 style="font-weight:700; margin-bottom:.5rem;">Envio de equipamento</h5>
                <p style="color:#6b7280; font-size:.93rem; margin:0;">
                    Deseja imprimir a etiqueta de envio para colar na caixa?
                </p>
            </div>
            <div class="modal-footer justify-content-center" style="border:none; padding:0 2rem 2rem; gap:.75rem;">
                <button type="button" class="btn btn-outline-secondary" id="btnEtiquetaNao" style="min-width:120px;">
                    Não, obrigado
                </button>
                <button type="button" class="btn btn-primary" id="btnEtiquetaSim" style="min-width:120px; background:#1d4ed8; border-color:#1d4ed8;">
                    <i class="bi bi-printer mr-1"></i> Imprimir
                </button>
            </div>
        </div>
    </div>
</div>

<script>
window.addEventListener('jquery-ready', function () {
    var etiquetaUrl = '{{ route('chamado.etiqueta.filial', session('etiqueta_chamado_id')) }}';

    $('#modalEtiquetaFilial').modal('show');

    $('#btnEtiquetaNao').on('click', function () {
        $('#modalEtiquetaFilial').modal('hide');
    });

    $('#btnEtiquetaSim').on('click', function () {
        var frame = document.createElement('iframe');
        frame.style.cssText = 'position:fixed;top:-9999px;left:-9999px;width:1px;height:1px;border:none;';
        frame.src = etiquetaUrl;
        document.body.appendChild(frame);
        frame.addEventListener('load', function () {
            frame.contentWindow.focus();
            frame.contentWindow.print();
            setTimeout(function () { document.body.removeChild(frame); }, 3000);
        });
        $('#modalEtiquetaFilial').modal('hide');
    });
});
</script>
@endif

@endsection