@extends('welcome') @section('conteudo') @include('auth.login')

<link rel="stylesheet" href="{{ URL::asset('css/portal_servicos.css') }}">
<link rel="stylesheet" href="{{ URL::asset('css/home.css') }}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

{{-- Hero --}}
<section class="ps-hero">
    <p class="ps-hero-sub">Central de Atendimento CDA</p>
    <h1 class="ps-hero-title">Portal de <span>Serviços</span></h1>
</section>

{{-- Feature strip --}}
<section class="ps-strip">
    <div class="container-fluid">
        <div class="row justify-content-center flex-nowrap">
            <div class="ps-strip-item">
                <div class="ps-strip-icon"><i class="bi bi-lightning-charge-fill"></i></div>
                <div>
                    <div class="ps-strip-label">Atendimento rápido</div>
                    <div class="ps-strip-sub">Ligue para o setor ou abra um chamado</div>
                </div>
            </div>
            <div class="ps-strip-item">
                <div class="ps-strip-icon"><i class="bi bi-chat-dots-fill"></i></div>
                <div>
                    <div class="ps-strip-label">Atendimento dinâmico</div>
                    <div class="ps-strip-sub">Suporte e comunicação direta</div>
                </div>
            </div>
            <div class="ps-strip-item">
                <div class="ps-strip-icon"><i class="bi bi-exclamation-diamond-fill"></i></div>
                <div>
                    <div class="ps-strip-label">Avisos e destaques</div>
                    <div class="ps-strip-sub">Fique por dentro das novidades</div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Departments --}}
<section id="chamados" class="ps-section animated-content" style="animation-delay: .3s;">
    <div class="ps-section-head text-center">
        <h2 class="ps-section-title">Departamentos</h2>
        <p class="ps-section-sub">Selecione um departamento para acessar os serviços disponíveis.</p>
    </div>

    <div class="row justify-content-center">

        {{-- RH --}}
        <div class="col-md-4 col-sm-6 mb-4">
            <a href="{{ url('rh/home') }}" class="ps-dept-link">
                <div class="ps-dept-card">
                    <div class="ps-dept-accent"></div>
                    <div class="ps-dept-body">
                        <div class="ps-dept-icon-wrap">
                            <i class="bi bi-person-badge"></i>
                        </div>
                        <h5 class="ps-dept-name">Recursos Humanos</h5>
                        <p class="ps-dept-desc">Acesse abertura de chamados para serviços direcionados ao RH.</p>
                        <span class="ps-dept-cta">Acessar <i class="bi bi-arrow-right"></i></span>
                    </div>
                </div>
            </a>
        </div>

        {{-- TI --}}
        <div class="col-md-4 col-sm-6 mb-4">
            <a href="{{ url('/ti/home') }}" class="ps-dept-link">
                <div class="ps-dept-card">
                    <div class="ps-dept-accent"></div>
                    <div class="ps-dept-body">
                        <div class="ps-dept-icon-wrap">
                            <i class="bi bi-display"></i>
                        </div>
                        <h5 class="ps-dept-name">Tecnologia da Informação</h5>
                        <p class="ps-dept-desc">Solicite suporte técnico, acesse ferramentas e faça agendamentos.</p>
                        <span class="ps-dept-cta">Acessar <i class="bi bi-arrow-right"></i></span>
                    </div>
                </div>
            </a>
        </div>

        {{-- Logística --}}
        <div class="col-md-4 col-sm-6 mb-4">
            <a href="{{ url('/logistica/home') }}" class="ps-dept-link">
                <div class="ps-dept-card">
                    <div class="ps-dept-accent"></div>
                    <div class="ps-dept-body">
                        <div class="ps-dept-icon-wrap">
                            <i class="bi bi-truck"></i>
                        </div>
                        <h5 class="ps-dept-name">Logística</h5>
                        <p class="ps-dept-desc">Acesse abertura de chamados para serviços direcionados à Logística.</p>
                        <span class="ps-dept-cta">Acessar <i class="bi bi-arrow-right"></i></span>
                    </div>
                </div>
            </a>
        </div>

        @if(Auth::check() && in_array((int) (Auth::user()->level ?? 0), [1, 2, 99]))
        {{-- Dev — visível apenas para level 1+ --}}
        <div class="col-md-4 col-sm-6 mb-4">
            <a href="{{ route('dev.form.chamado') }}" class="ps-dept-link">
                <div class="ps-dept-card">
                    <div class="ps-dept-accent"></div>
                    <div class="ps-dept-body">
                        <div class="ps-dept-icon-wrap">
                            <i class="bi bi-code-slash"></i>
                        </div>
                        <h5 class="ps-dept-name">Desenvolvimento</h5>
                        <p class="ps-dept-desc">Reporte bugs, tire dúvidas técnicas ou envie ideias para o time de desenvolvimento.</p>
                        <span class="ps-dept-cta">Acessar <i class="bi bi-arrow-right"></i></span>
                    </div>
                </div>
            </a>
        </div>
        @endif

        {{-- Card Crediário OCULTO --}} {{--
        <div class="col-md-4 mb-4">
            <a href="{{ url('/crediario/home') }}" class="ps-dept-link">
                <div class="ps-dept-card">...</div>
            </a>
        </div>
        --}}
    </div>
</section>

<div class="ps-hr"></div>

{{-- How we help --}}
<section class="ps-help-section animated-content" style="animation-delay: .55s;">
    <div class="ps-section-head text-center">
        <h2 class="ps-section-title">Como podemos ajudar?</h2>
        <p class="ps-section-sub">Veja o que cada departamento pode fazer por você.</p>
    </div>

    <div class="row justify-content-center">
        <div class="col-md-4 mb-4">
            <div class="ps-help-card">
                <div class="ps-help-head">
                    <i class="bi bi-person-badge"></i> Recursos Humanos
                </div>
                <ul class="ps-help-list">
                    <li><i class="bi bi-check-circle-fill"></i> Documentos para admissão</li>
                </ul>
            </div>
        </div>
        <div class="col-md-4 mb-4">
            <div class="ps-help-card">
                <div class="ps-help-head">
                    <i class="bi bi-display"></i> Tecnologia da Informação
                </div>
                <ul class="ps-help-list">
                    <li><i class="bi bi-check-circle-fill"></i> Abrir chamados técnicos</li>
                    <li><i class="bi bi-check-circle-fill"></i> Instalação de programas</li>
                    <li><i class="bi bi-check-circle-fill"></i> Configuração de e-mail</li>
                    <li><i class="bi bi-check-circle-fill"></i> Agendamento de equipamentos</li>
                    <li><i class="bi bi-check-circle-fill"></i> Suporte a impressoras e redes</li>
                </ul>
            </div>
        </div>
        <div class="col-md-4 mb-4">
            <div class="ps-help-card">
                <div class="ps-help-head">
                    <i class="bi bi-truck"></i> Logística
                </div>
                <ul class="ps-help-list">
                    <li><i class="bi bi-check-circle-fill"></i> Solicitação de equipamentos</li>
                    <li><i class="bi bi-check-circle-fill"></i> Ajuste de estoque</li>
                </ul>
            </div>
        </div>
    </div>
</section>

<footer class="ps-page-footer">
    Desenvolvido por : Casas da Água © 2022
</footer>

@endsection

@push('scripts')
<style>
.ps-hero { padding-top: 68px; padding-bottom: 68px; }

/* ===== Tutorial CDA ===== */

/* 4-segment mask — each piece blocks clicks and dims a quadrant around the spotlight */
#tut-mt, #tut-mb, #tut-ml, #tut-mr {
    position: fixed;
    z-index: 9990;
    background: rgba(0, 0, 0, 0.72);
    pointer-events: all;
    display: none;
    opacity: 0;
    transition: opacity .32s ease;
}
#tut-mt.tut-on, #tut-mb.tut-on, #tut-ml.tut-on, #tut-mr.tut-on { opacity: 1; }

/* Spotlight — sits above the mask, no background, just a glowing border */
#tut-spotlight {
    position: fixed;
    z-index: 9996;
    display: none; opacity: 0;
    pointer-events: none;
    border: 2.5px solid var(--primary-home);
    animation: tut-pulse 2.2s ease-in-out infinite;
    transition:
        top    .4s cubic-bezier(.4, 0, .2, 1),
        left   .4s cubic-bezier(.4, 0, .2, 1),
        width  .4s cubic-bezier(.4, 0, .2, 1),
        height .4s cubic-bezier(.4, 0, .2, 1),
        opacity .32s ease;
}
#tut-spotlight.tut-on { opacity: 1; }

@keyframes tut-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(77,124,245,.2),  0 0 18px rgba(77,124,245,.25); }
    50%       { box-shadow: 0 0 0 7px rgba(77,124,245,.08), 0 0 32px rgba(77,124,245,.55); }
}

/* Tooltip card */
#tut-tooltip {
    position: fixed;
    z-index: 11000;
    background: #fff;
    padding: 1.2rem 1.35rem .95rem;
    box-shadow: 0 16px 48px rgba(0,0,0,.17), 0 2px 8px rgba(0,0,0,.08);
    font-family: 'Poppins', sans-serif;
    display: none; opacity: 0;
    min-width: 260px; max-width: calc(100vw - 24px);
    max-height: calc(100vh - 80px); overflow-y: auto;
    transform: translateY(12px) scale(.97);
    transition: opacity .25s ease, transform .25s ease;
}
#tut-tooltip.tut-on { opacity: 1; transform: translateY(0) scale(1); }

.tut-icon  { font-size: 1.55rem; color: #0862ad; margin-bottom: .4rem; line-height: 1; }
.tut-title { font-size: .94rem; font-weight: 700; color: #1a202c; margin-bottom: .28rem; }
.tut-desc  { font-size: .8rem;  color: #4a5568;  line-height: 1.6; margin-bottom: .8rem; }

.tut-footer  { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-top: .9rem; }
.tut-dots    { display: flex; gap: 4px; align-items: center; }
.tut-dot     { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #e2e8f0; transition: all .25s ease; }
.tut-dot.on  { background: #0862ad; width: 18px; border-radius: 3px; }
.tut-actions { display: flex; gap: .3rem; align-items: center; }

.tut-btn {
    display: inline-flex; align-items: center; gap: 3px;
    border: none; cursor: pointer; border-radius: 8px;
    font-size: .75rem; font-weight: 600; padding: .36rem .82rem;
    font-family: inherit; transition: all .15s ease; white-space: nowrap;
}
.tut-next { background: #0862ad; color: #fff; }
.tut-next:hover { background: #0c2444; transform: translateY(-1px); }
.tut-back { background: transparent; color: #718096; border: 1px solid #e2e8f0; }
.tut-back:hover { background: #f7fafc; }
.tut-skip { background: transparent; color: #a0aec0; font-weight: 400; padding-left: .3rem; padding-right: .3rem; }
.tut-skip:hover { color: #718096; }

/* Help button */
#tut-help-btn {
    position: fixed; bottom: 24px; left: 24px; z-index: 8900;
    width: 38px; height: 38px; border-radius: 50%;
    background: #fff; border: 1.5px solid #e2e8f0;
    box-shadow: 0 2px 10px rgba(0,0,0,.1);
    cursor: pointer; display: none;
    align-items: center; justify-content: center;
    color: #718096; font-size: 1rem;
    transition: all .2s ease;
}
#tut-help-btn:hover {
    background: #0862ad; color: #fff; border-color: #0862ad;
    transform: scale(1.08); box-shadow: 0 4px 14px rgba(8, 98, 173, .35);
}
</style>

<script>
(function () {
    'use strict';
    var LS = 'cda_tutorial_v2';
    var cur = 0;
    var mT, mB, mL, mR, sEl, tEl, hEl;

    /* Mini mockup da página de Acompanhamento */
    var ACOMP_HTML =
        '<div style="margin-top:.65rem;border:1px solid #e2e8f0;border-radius:9px;overflow:hidden;font-size:11px;font-family:Poppins,sans-serif;">' +
            '<div style="padding:7px 10px;border-bottom:1px solid #e2e8f0;background:#fff;">' +
                '<div style="font-size:8px;color:#a0aec0;text-transform:uppercase;letter-spacing:1px;">Acompanhamento</div>' +
                '<div style="font-weight:700;color:#1a202c;font-size:11px;margin-top:1px;">Seus Chamados</div>' +
            '</div>' +
            '<div style="display:flex;align-items:center;gap:8px;padding:6px 10px;background:#fff;border-bottom:1px solid #f1f5f9;">' +
                '<b style="color:#e6ab09;font-size:10px;min-width:24px;">#47</b>' +
                '<div style="flex:1;min-width:0;">' +
                    '<div style="color:#1a202c;font-size:10px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">Computador n&atilde;o liga</div>' +
                    '<span style="background:#4164c4;color:#fff;font-size:7px;padding:1px 5px;border-radius:3px;">TI</span>' +
                '</div>' +
                '<span style="background:#dbeafe;color:#3b82f6;font-size:8px;padding:2px 7px;border-radius:10px;white-space:nowrap;">Em andamento</span>' +
            '</div>' +
            '<div style="display:flex;align-items:center;gap:8px;padding:6px 10px;background:#f8fafc;border-bottom:1px solid #e2e8f0;">' +
                '<b style="color:#e6ab09;font-size:10px;min-width:24px;">#45</b>' +
                '<div style="flex:1;min-width:0;">' +
                    '<div style="color:#1a202c;font-size:10px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">Instala&ccedil;&atilde;o de software</div>' +
                    '<span style="background:#4164c4;color:#fff;font-size:7px;padding:1px 5px;border-radius:3px;">TI</span>' +
                '</div>' +
                '<span style="background:#d1fae5;color:#059669;font-size:8px;padding:2px 7px;border-radius:10px;white-space:nowrap;">Solucionado</span>' +
            '</div>' +
            '<div style="padding:6px 10px;background:#fff;">' +
                '<div style="font-size:8px;color:#4d7cf5;font-weight:600;display:flex;align-items:center;gap:4px;margin-bottom:5px;">' +
                    '<i class="bi bi-hand-index-thumb"></i> Clique em um chamado para ver o conte&uacute;do' +
                '</div>' +
                '<div style="background:#f0f7ff;border:1px solid #bfdbfe;border-radius:7px;padding:7px 9px;">' +
                    '<div style="font-size:8px;color:#6b7280;margin-bottom:3px;display:flex;align-items:center;gap:3px;">' +
                        '<i class="bi bi-chat-text"></i> Resposta do t&eacute;cnico' +
                    '</div>' +
                    '<div style="font-size:10px;color:#374151;line-height:1.45;">Troca de fonte identificada. Equipamento agendado para amanh&atilde;.</div>' +
                '</div>' +
            '</div>' +
        '</div>';

    var steps = [
        {
            target: null,
            icon: 'bi-stars',
            title: 'Bem-vindo ao Portal de Servi&ccedil;os!',
            text: 'Deixa eu te mostrar como o sistema funciona. S&atilde;o poucos passos — r&aacute;pido e sem complica&ccedil;&atilde;o!',
            pos: 'center'
        },
        {
            target: 'a[href="/acompanhamento"]',
            wide: true,
            icon: 'bi-clock-history',
            title: 'Acompanhamento de Chamados',
            text: 'Aqui voc&ecirc; acompanha todos os seus chamados abertos e v&ecirc; as respostas dos t&eacute;cnicos.' + ACOMP_HTML,
            pos: 'bottom'
        },
        {
            target: '.site-header-end',
            icon: 'bi-person-circle',
            title: 'Login e Perfil',
            text: 'Fa&ccedil;a login com sua <strong>matr&iacute;cula</strong> para abrir chamados e acompanhar suas solicita&ccedil;&otilde;es.',
            pos: 'bottom-left'
        },
        {
            target: '#chamados .ps-section-head',
            icon: 'bi-grid-3x3-gap-fill',
            title: 'Departamentos',
            text: 'Clique no departamento correto para ver os servi&ccedil;os dispon&iacute;veis. Escolher o <strong>setor certo</strong> agiliza muito o atendimento!',
            pos: 'bottom',
            scroll: true
        },
        {
            target: null,
            icon: 'bi-check-circle-fill',
            title: 'Tudo pronto!',
            text: 'Agora voc&ecirc; j&aacute; conhece o portal. Se precisar de ajuda, abra um chamado para o <strong>TI</strong>. Bom atendimento!',
            pos: 'center'
        }
    ];

    /* ---- helpers ---- */

    function getRect(sel) {
        if (!sel) return null;
        var el = document.querySelector(sel);
        if (!el) return null;
        var r = el.getBoundingClientRect(), p = 8;
        return { top: r.top - p, left: r.left - p, w: r.width + p * 2, h: r.height + p * 2 };
    }

    /* Position the 4 mask segments around the spotlight area */
    function updateMask(r) {
        if (!r) {
            /* no target — cover everything with the top segment */
            mT.style.top = '0'; mT.style.left = '0'; mT.style.right = '0';
            mT.style.bottom = '0'; mT.style.height = 'auto'; mT.style.display = 'block';
            [mB, mL, mR].forEach(function (e) { e.style.display = 'none'; });
            return;
        }
        /* top: viewport top → element top */
        mT.style.top = '0'; mT.style.left = '0'; mT.style.right = '0';
        mT.style.bottom = 'auto'; mT.style.height = Math.max(0, r.top) + 'px'; mT.style.display = 'block';

        /* bottom: element bottom → viewport bottom */
        mB.style.top = (r.top + r.h) + 'px'; mB.style.left = '0'; mB.style.right = '0';
        mB.style.bottom = '0'; mB.style.height = 'auto'; mB.style.display = 'block';

        /* left: left edge → element left, at element's row height */
        mL.style.top = r.top + 'px'; mL.style.left = '0'; mL.style.right = 'auto';
        mL.style.width = Math.max(0, r.left) + 'px'; mL.style.height = r.h + 'px'; mL.style.display = 'block';

        /* right: element right → right edge, at element's row height */
        mR.style.top = r.top + 'px'; mR.style.left = (r.left + r.w) + 'px'; mR.style.right = '0';
        mR.style.height = r.h + 'px'; mR.style.width = 'auto'; mR.style.display = 'block';
    }

    function placeTooltip(r, s) {
        var vw = window.innerWidth, vh = window.innerHeight;
        var tw = Math.min(s.wide ? 390 : 320, vw - 24);
        var th = s.wide ? 340 : 210;
        tEl.style.width = tw + 'px';
        var t, l;
        var pos = s.pos;
        if (!r || pos === 'center')     { t = (vh - th) / 2; l = (vw - tw) / 2; }
        else if (pos === 'bottom')      { t = r.top + r.h + 14; l = r.left + (r.w - tw) / 2; }
        else if (pos === 'bottom-left') { t = r.top + r.h + 14; l = r.left + r.w - tw; }
        else if (pos === 'top')         { t = r.top - th - 14;  l = r.left + (r.w - tw) / 2; }
        tEl.style.top  = Math.max(12, Math.min(vh - 60, t)) + 'px';
        tEl.style.left = Math.max(12, Math.min(vw - tw - 12, l)) + 'px';
    }

    function dotHtml(idx, total) {
        var s = '';
        for (var i = 0; i < total; i++) s += '<span class="tut-dot' + (i === idx ? ' on' : '') + '"></span>';
        return s;
    }

    function renderCard(s, idx, total) {
        var last = idx === total - 1;
        tEl.innerHTML =
            '<div class="tut-icon"><i class="bi ' + s.icon + '"></i></div>' +
            '<div class="tut-title">' + s.title + '</div>' +
            '<div class="tut-desc">'  + s.text  + '</div>' +
            '<div class="tut-footer">' +
                '<div class="tut-dots">' + dotHtml(idx, total) + '</div>' +
                '<div class="tut-actions">' +
                    (idx > 0 ? '<button class="tut-btn tut-back" onclick="_tut.prev()">Voltar</button>' : '') +
                    '<button class="tut-btn tut-skip" onclick="_tut.skip()">Pular</button>' +
                    '<button class="tut-btn tut-next" onclick="_tut.next()">' +
                        (last ? 'Concluir <i class="bi bi-check"></i>' : 'Pr&oacute;ximo <i class="bi bi-arrow-right"></i>') +
                    '</button>' +
                '</div>' +
            '</div>';
    }

    /* ---- core ---- */

    function showStep(idx, instant) {
        var s = steps[idx];

        var doShow = function () {
            var r = getRect(s.target);

            /* mask */
            updateMask(r);

            /* spotlight */
            if (r) {
                sEl.style.top = r.top + 'px'; sEl.style.left = r.left + 'px';
                sEl.style.width = r.w + 'px'; sEl.style.height = r.h + 'px';
                sEl.style.display = 'block';
                requestAnimationFrame(function () { sEl.classList.add('tut-on'); });
            } else {
                sEl.classList.remove('tut-on');
                setTimeout(function () { sEl.style.display = 'none'; }, 320);
            }

            /* tooltip */
            renderCard(s, idx, steps.length);
            placeTooltip(r, s);
            tEl.style.display = 'block';
            tEl.classList.remove('tut-on');
            if (instant) { tEl.classList.add('tut-on'); }
            else { requestAnimationFrame(function () { tEl.classList.add('tut-on'); }); }
        };

        if (s.scroll && s.target) {
            var el = document.querySelector(s.target);
            if (el) { el.scrollIntoView({ behavior: 'smooth', block: 'center' }); setTimeout(doShow, 520); return; }
        }
        doShow();
    }

    function maskOn()  { [mT, mB, mL, mR].forEach(function (e) { e.classList.add('tut-on'); }); }
    function maskOff() { [mT, mB, mL, mR].forEach(function (e) { e.classList.remove('tut-on'); }); }
    function maskHide(){ [mT, mB, mL, mR].forEach(function (e) { e.style.display = 'none'; }); }

    function build() {
        function mk(id) { var e = document.createElement('div'); e.id = id; document.body.appendChild(e); return e; }
        mT = mk('tut-mt'); mB = mk('tut-mb'); mL = mk('tut-ml'); mR = mk('tut-mr');
        sEl = mk('tut-spotlight');
        tEl = mk('tut-tooltip');
        hEl = document.createElement('button');
        hEl.id = 'tut-help-btn'; hEl.title = 'Ver tutorial novamente';
        hEl.innerHTML = '<i class="bi bi-question-circle"></i>';
        hEl.addEventListener('click', function () { _tut.start(); });
        document.body.appendChild(hEl);
    }

    function start() {
        if (!mT) build();
        cur = 0;
        var dt = document.getElementById('dicas-toast');
        if (dt && window.$) { try { $(dt).toast('hide'); } catch (e) {} }
        if (hEl) hEl.style.display = 'none';
        /* show first step then fade in mask */
        showStep(0);
        requestAnimationFrame(maskOn);
    }

    function finish() {
        localStorage.setItem(LS, '1');
        maskOff();
        tEl.classList.remove('tut-on');
        sEl.classList.remove('tut-on');
        setTimeout(function () {
            maskHide();
            tEl.style.display = 'none';
            sEl.style.display = 'none';
            if (hEl) hEl.style.display = 'flex';
        }, 340);
    }

    window._tut = {
        next:  function () { cur < steps.length - 1 ? showStep(++cur) : finish(); },
        prev:  function () { if (cur > 0) showStep(--cur); },
        skip:  finish,
        start: start
    };

    function maybeStart() {
        if (!localStorage.getItem(LS)) { setTimeout(start, 1200); }
        else { if (!mT) build(); if (hEl) hEl.style.display = 'flex'; }
    }

    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', maybeStart);
    else maybeStart();

    window.addEventListener('resize', function () {
        if (mT && mT.style.display !== 'none') showStep(cur, true);
    });
})();
</script>
@endpush