@extends('welcome')
<link rel="stylesheet" href="css/home.css">

@section('conteudo')
    {{-- <div id="snowflakeContainer">
        <p class="snowflake">*</p>
    </div> --}}
    <div class="hero-bg" style="background-image: url(images/fundo-neutro2.png); height:300px;">
        <div class="tela"></div>
        <section id="stats-subtitle" style="height: 300px; display:flex; align-items:center; justify-content:center;">
            <div class="row justify-content-center">
                    <div class="col-12 my-3 text-center">
                        <p class="mr-5" style="color:rgb(225, 233, 241); letter-spacing: 2px;">Abertura de chamados TI</p>
                        <h1 class="hero-text" style="font-family: poppins"><span>Portal de </span>Chamados</h1>
                    </div>
                    {{-- <div class="col-12 my-2 text-center">
                        <a href="#chamados" class="btn btn-home mx-2">
                            <h5>Chamados</h5>
                        </a>
                        <a class="btn btn-home outlined mx-2">
                            <h5>Resolver agora</h5>
                        </a>
                    </div> --}}
            </div>
        </section>
    </div>
    <section class="py-5 mb-5 text-center shadow-sm" style="background-color: #fff;">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="icon-div ">
                    <div class="icon-home"><i class="bi bi-lightning-charge-fill"></i></div>
                    <div class="text-left ml-3 ">
                        <h5><strong>Atendimento</strong></h5>
                        <p>Ligue <strong> 3090 </strong> ou abra um chamado!</p>
                    </div>

                </div>
                <div class="icon-div ">
                    <div class="icon-home"><i class="bi bi-chat-dots-fill"></i></div>
                    <div class="text-left ml-3 ">
                        <h5><strong>Chat</strong></h5>
                        <p>Suporte pelo Chat CDA</p>
                    </div>

                </div>
                {{-- <div class="icon-div ">
                    <div class="icon-home"><i class="bi bi-flower1"></i></div>
                    <div class="text-left ml-3 ">
                        <h5><strong>Feliz 2024</strong></h5>
                        <p>Boas Festas!</p>
                    </div>

                </div> --}}
                <div class="icon-div ">
                    <div class="icon-home"><i class="bi bi-exclamation-diamond"></i></div>
                    <div class="text-left ml-3 ">
                        <h5><strong>Chamados</strong></h5>
                        <p>Abertura de chamados com a equipe de TI</p>
                    </div>

                </div>
            </div>
        </div>
    </section>
    <div id="chamados" style="padding-top: 50px; margin: 0px 15% 0px 15%">



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

            <div class="col-md-4 mb-2">


                    <!-- CARD CORE-->
                    <div class="card mb-4 shadow-sm fadeInRight" id="card">
                        <div class="color-header" style="background-image: url(images/back4.jpg);  background-size: cover;"></div>
                        <div class="logo" style="background-image: url(images/corebusiness_1200x300.png);"></div>
                        <div class="card_title mb-3 sans"><h5>Solicitações CoreBusiness</h5></div>
                        <div class="card-description" >
                            <p>Criar um novo login ou ajustar um usuário ja existente no sistema</p>
                            <a class="btn btn-chamado my-4 sans" data-toggle="modal" data-target="#modalCore"><p><i class="bi bi-arrow-return-right yellow" ></i>Abrir</p></a>
                        </div>
                    </div>

            </div>

            <div class="col-md-4 mb-2">
                    <!-- CARD CHAMADOS-->
                    <div class="card row mb-4 shadow-sm fadeInRight" id="card">

                        <div class="color-header" style="background-image: url(images/back4.jpg);  background-size: cover;"></div>
                        <div class="logo" style="background-image: url(images/logo-suporte.png);"></div>

                        <div class="card_title mb-3 sans"><h5>Chamados - Suporte TI</h5></div>
                        <div class="card-description" >
                            <p>Abrir chamados para assistencia ou solicitações diretamente com o TI.</p>
                            <a href="form/chamado" class="btn btn-chamado my-4 sans"><p><i class="bi bi-arrow-return-right yellow"></i>Abrir</p></a>
                        </div>
                    </div>

            </div>
            <div class="col-md-4 mb-2">
                <!-- CARD CORE-->
                <div class="card mb-4 shadow-sm fadeInRight" id="card">
                    {{-- <img src="images/natal-folhas.png" style="position: absolute; width: 70px; top: -30; right: -30;" alt=""> --}}
                    <div class="color-header" style="background-image: url(images/back4.jpg);  background-size: cover;"></div>

                    <div class="logo" style="background-image: url(images/calendar.jpg);"></div>

                    <div class="card_title mb-3 sans"><h5>Agendamento equipamentos</h5></div>
                    <div class="card-description" >

                        <p>Agendamento para uso de equipamentos e materiais - TI</p>
                        <a class="btn btn-chamado my-4 sans" href="agendamento"><p><i class="bi bi-arrow-return-right yellow" ></i>Abrir</p></a>
                    </div>

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

            <div class="col-md-6 mb-2">

                <!-- CARD EMAIL-->
                    <div class="card mb-4 shadow-sm fadeInRight2" id="card-h">
                        <div class="row justify-content-end">

                            <div class="color-header" style="background-image:linear-gradient(to right, rgb(11, 52, 90),rgb(13, 81, 145));"></div>
                            <div class="logo" style="background-image: url(images/email.png); width: 120px;"></div>
                            <div class="text">

                                <div class="card_title mb-3 sans"><h5>Solicitações Email</h5></div>

                                <div class="card-description" >
                                    <p>Criação de email interno e/ou assinatura.</p>
                                </div>
                            </div>
                            <a class="btn btn-chamado my-4" data-toggle="modal" data-target="#modalEmail"><p><i class="bi bi-arrow-return-right yellow"></i>Abrir</p></a>

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

            <div class="col-md-6 mb-2">

                <!-- CARD CHAT-->
                    <div class="card mb-4 shadow-sm fadeInRight2" id="card-h">
                        <div class="row justify-content-end">

                            <div class="color-header sans" style="background-image:linear-gradient(to right, rgb(11, 52, 90),rgb(13, 81, 145));"></div>
                            <div class="logo" style="background-image: url(images/logo-mattermost_.png);"></div>
                            <div class="text">

                                <div class="card_title mb-3 sans"><h5>Solicitação de Chat</h5></div>
                                <div class="card-description" >
                                    <p>Solicitações para criação ou ajuste de chat interno.</p>
                                </div>
                            </div>
                            <a class="btn btn-chamado my-4" data-toggle="modal" data-target="#modalChat"><p><i class="bi bi-arrow-return-right yellow"></i>Abrir</p></a>

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

        </div>

        <hr>


        <!-- Modal Core -->
        <div class="modal fade home-card" id="modalCore" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                    <h4 class="modal-title" id="exampleModalLabel"><img src="images/corebusiness_1200x300.png" width="120" height="30" class="align-top mt-1 mr-2" alt="">
                        </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    </div>
                    <h3 class="w-100 text-muted text-center">Selecione uma opção<br><i class="bi bi-chevron-compact-down"></i>
                    </h3>
                    <div class="modal-body card-group" >
                        <a class="card" href="form/core">
                            <div class="card-body text-center">
                                <div class="card-top">
                                    <i class="bi bi-person-plus-fill"></i>
                                </div>
                                <div class="card-text">
                                    <h3 class="card-title">Criação de login</h3>
                                    <p class="card-text ">Solicitação para criação de um <strong>novo login no CoreBusiness.</strong></p>
                                </div>

                            </div>
                        </a>
                        <a class="card" href="form/coreforms">
                            <div class="card-body text-center">
                                <div class="card-top">
                                    <i class="bi bi bi-gear"></i>
                                </div>
                                <div class="card-text">
                                    <h3 class="card-title">Ajuste de usuário</h3>
                                    <p class="card-text ">Alterar permissões, login, senha, entre outras solicitações referentes a <strong>usuários já existentes.</strong></p>
                                </div>

                            </div>
                        </a>
                        <a class="card" href="remove/core">
                            <div class="card-body text-center">
                                <div class="card-top">
                                    <i class="bi bi bi-x"></i>
                                </div>
                                <div class="card-text">
                                    <h3 class="card-title">Desativar usuário</h3>
                                    <p class="card-text ">Desativar um ou mais usuários do sistema CoreBusiness</p>
                                </div>

                            </div>
                        </a>

                    </div>
                    <div class=" card-body text-center ">
                        <h5 class="card-title"><i class="bi bi-exclamation-diamond" style="color: rgb(211, 175, 14);"></i></h5>
                        <p class="mb-3 text-muted">Esse formulário não é destinado para SUPORTE operacional do sistema, caso seja isso que esteja procurando, favor enviar no grupo de Whatsapp de Duvidas.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal EMAIL -->
        <div class="modal fade home-card" id="modalEmail" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                    <h4 class="modal-title" id="exampleModalLabel"><img src="images/zimbra-black.png" width="120" height="30" class="align-top mt-1 mr-2" alt="">
                        </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    </div>
                    <h3 class="w-100 text-muted text-center">Selecione uma opção<br><i class="bi bi-chevron-compact-down"></i>
                    </h3>
                    <div class="modal-body card-group">
                        <a class="card" href="form/email">
                            <div class="card-body text-center">
                                <div class="card-top">
                                    <i class="bi bi-person-plus-fill"></i>
                                </div>
                                <div class="card-text">
                                    <h3 class="card-title">Criação de Email</h3>
                                    <p class="card-text ">Enviar informações do colaborador para a criação de um<strong> novo email.</strong></p>
                                </div>

                            </div>
                        </a>
                        <a class="card" href="form/emailforms">
                            <div class="card-body text-center">
                                <div class="card-top">
                                    <i class="bi bi-gear"></i>
                                </div>
                                <div class="card-text">
                                    <h3 class="card-title">Ajustes de email</h3>
                                    <p class="card-text ">Alterar informações, configurações ou senha de um email <strong>já existente.</strong></p>
                                </div>

                            </div>
                        </a>
                        <a class="card" href="form/assinatura">
                            <div class="card-body text-center">
                                <div class="card-top">
                                    <i class="bi bi-patch-check-fill"></i>
                                </div>
                                <div class="card-text">
                                    <h3 class="card-title">Criar Assinatura</h3>
                                    <p class="card-text ">Criar uma assinatura nova pra o email CDA.</p>
                                </div>

                            </div>
                        </a>

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

        <!-- Modal CHAT -->
        <div class="modal fade home-card" id="modalChat" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                    <h4 class="modal-title" id="exampleModalLabel"><img src="images/logo-mattermost.png" width="30" height="30" class="align-top mr-2" alt="">
                        Chat CDA - Messenger</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    </div>
                    <h3 class="w-100 text-muted text-center">Selecione uma opção<br><i class="bi bi-chevron-compact-down"></i>
                    </h3>
                    <div class="modal-body card-group" >
                        <a class="card" href="form/chat">
                            <div class="card-body text-center">
                                <div class="card-top">
                                    <i class="bi bi-person-plus-fill"></i>
                                </div>
                                <div class="card-text">
                                    <h3 class="card-title">Criação de Chat</h3>
                                    <p class="card-text ">Enviar informações do colaborador para a criação de <strong>um novo chat CDA.</strong></p>
                                </div>

                            </div>
                        </a>

                        <a class="card" href="form/chatforms">
                            <div class="card-body text-center">
                                <div class="card-top">
                                    <i class="bi bi-gear"></i>
                                </div>
                                <div class="card-text">
                                    <h3 class="card-title">Ajustes de usuário</h3>
                                    <p class="card-text ">Alterar login, senha, email de um chat<strong> já existente.</strong></p>
                                </div>

                            </div>
                        </a>
                        <a class="card" href="form/chatforms">
                            <div class="card-body text-center">
                                <div class="card-top">
                                    <i class="bi bi-trash"></i>
                                </div>
                                <div class="card-text">
                                    <h3 class="card-title">Desativar chat</h3>
                                    <p class="card-text ">Enviar informações do chat que será desativado.</p>
                                </div>

                            </div>
                        </a>


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

    </div>
    <section id="apps-drives" style="background-color: #fff ; padding:  100px 0px 100px 0px ">
        <div class="container">
            <div class="row p-5 fadeInRight">

                <div class="col-sm-7">

                    <div class="card mb-5 shadow">
                        <div class="topline-blue"></div>


                        <div class="card-body mt-3">
                            <div class="row">
                                <div class="col-4">
                                    <div class="text-center">
                                        <a href="storage/apps/AnyDesk.exe" download>
                                            <img class="shadow mb-3 img-app" src="images/anydesk.jpg"  >
                                        </a>
                                        <h5>Any Desk</h5>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="text-center">
                                        <a href="storage/apps/TeamViewer_Setup.exe" download>
                                            <img class="shadow mb-3 img-app" src="images/teamviwer.jpg"  >
                                        </a>
                                        <h5>Team Viewer</h5>
                                    </div>

                                </div>
                                <div class="col-4">
                                    <div class="text-center">
                                        <a href="storage/apps/Thunderbird Setup 91.0.3.exe" download>
                                            <img class="shadow mb-3 img-app" src="images/thunder.jpg"  >
                                        </a>
                                        <h5>Thunder Bird</h5>
                                    </div>
                                </div>


                            </div>
                            <div class="row mt-5">
                                <div class="col-4">
                                    <div class="text-center">
                                        <a href="storage/apps/mattermost-desktop-setup-4.7.1-win.exe" download>
                                            <img class="shadow mb-3 img-app" src="images/mathermost.png"  >
                                        </a>
                                        <h5>Mattermost</h5>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="text-center">
                                        <a href="storage/apps/Firefox Installer.exe" download>
                                            <img class="shadow mb-3 img-app" src="images/firefox.jpg"  >
                                        </a>
                                        <h5>Mozilla Firefox</h5>
                                    </div>
                                </div>

                                <div class="col-4">
                                    <div class="text-center">
                                        <a href="storage/apps/winrar-x64-591br.exe" download>
                                            <img class="shadow mb-3 img-app" src="images/winrar.png"  >
                                        </a>
                                        <h5>Win RAR</h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-5 fadeInRight2">
                    <div class="container text-center">
                        <h3 class="mb-5">Como Baixar?</h3>
                        <h5 class="mb-5">Basta clicar no aplicativo que você foi orientado ou precisa instalar e o download vai começar</h5>
                        <p>
                            Onde vou usar?<br>
                            <a class="btn btn-home my-4" data-toggle="modal" data-target="#appinfo"><strong>VER MAIS</strong> </a>

                        </p>

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

    </section>
    <!-- Modal CHAT -->
    <div class="modal fade" id="appinfo" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                </div>
                <div class="modal-body" style="background-color: rgb(251, 254, 255)">
                    <div class="row justifu-content-center">
                        <div class="col-md-6">
                            <div class="row py-3">
                                <div class="col">
                                    <a href="storage/apps/AnyDesk.exe" download>
                                        <img class="shadow mb-3 img-app" src="images/anydesk.jpg"  >
                                    </a>
                                    <h5>Any Desk</h5>
                                </div>
                                <div class="col ">
                                    <p class="text-left">Aplicativo usado para o acesso dos técnicos ao seu computador via ID.</p>
                                </div>

                            </div>
                            <div class="row py-3">
                                <div class="col">
                                    <a href="storage/apps/TeamViewer_Setup.exe" download>
                                        <img class="shadow mb-3 img-app" src="images/teamviwer.jpg"  >
                                    </a>
                                    <h5>Team Viewer</h5>
                                </div>
                                <div class="col ">
                                    <p class="text-left">Aplicativo usado para o acesso dos técnicos ao seu computador via ID.</p>
                                </div>

                            </div>
                            <div class="row py-3">
                                <div class="col">
                                    <a href="storage/apps/Thunderbird Setup 91.0.3.exe" download>
                                        <img class="shadow mb-3 img-app" src="images/thunder.jpg"  >
                                    </a>
                                    <h5>Thunder Bird</h5>
                                </div>
                                <div class="col ">
                                    <p class="text-left">Cliente de Email, deve ser autorizado e configuado pelo TI.</p>
                                </div>

                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="row py-3">
                                <div class="col">
                                    <a href="storage/apps/mattermost-desktop-setup-4.7.1-win.exe" download>
                                        <img class="shadow mb-3 img-app" src="images/mathermost.png"  >
                                    </a>
                                    <h5>Mattermost</h5>
                                </div>
                                <div class="col ">
                                    <p class="text-left">Chat para Desktop, deve ser autorizado e configurado pelo TI</p>
                                </div>

                            </div>
                            <div class="row py-3">
                                <div class="col">
                                    <a href="storage/apps/Firefox Installer.exe" download>
                                        <img class="shadow mb-3 img-app" src="images/firefox.jpg"  >
                                    </a>
                                    <h5>Mozilla Firefox</h5>
                                </div>
                                <div class="col ">
                                    <p class="text-left">Navegador padrão usado pela rede CDA.</p>
                                </div>

                            </div>
                            <div class="row py-3">
                                <div class="col">
                                    <a href="storage/apps/winrar-x64-591br.exe" download>
                                        <img class="shadow mb-3 img-app" src="images/winrar.png"  >
                                    </a>
                                    <h5>Win RAR</h5>
                                </div>
                                <div class="col ">
                                    <p class="text-left">Aplicativo usado para gerenciar arquivos compactados: .zip, .rar, etc...</p>
                                </div>

                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
    <section id="suport-chat" >
        <div class="container text-center" style="padding:  100px 0px 100px 0px ">
            <h2 class="hero-text suporte-rapido mb-5">
                Suporte <span style="color: #464646">Rápido</span>
            </h2>
            <div class="row mt-5">

                <div class="col-md-12 ">
                    <div class="text-muted text-center table-init" >
                        <p >Bem vindo ao suporte automatico, <br> A seguir mostraremos opções, e você deve selecionar a
                        opção que melhor corresponde ao seu problema. Nosso sistema auxiliara
                        com dicas e imagens.</p>
                        <a class="btn btn-chamado my-4" id="iniciar"><p><i class="bi bi-caret-right-fill yellow"></i>Iniciar</p></a>

                    </div>
                    <div class="text-muted text-left table-options hidden" >
                        <div class="row justify-content-center">
                            <div class="col img">
                                    <img src="images/pc.png" id="pc" alt="Computador">
                                    <p>Computador</p>
                            </div>
                            <div class="col img">
                                <img src="images/rede.png" id="rede" alt="">
                                <p>Rede</p>
                            </div>
                            <div class="col img">
                                <img src="images/impressora.png" id="impressora" alt="">
                                <p>Impressora</p>
                            </div>
                            <div class="col img">
                                <img src="images/sistema.png" id="sistema" alt="">
                                <p>Sistema</p>
                            </div>
                        </div>
                        <div class="row justify-content-center ">
                            <div class="col img">
                                <img src="images/apps.png" id="apps" alt="">
                                <p>Programas</p>
                            </div>
                            <div class="col img">
                                <img src="images/equipamentos.png" id="equipamentos" alt="">
                                <p>Equipamentos</p>
                            </div>
                            <div class="col img">
                                <img src="images/telefonia.png" id="telefonia" alt="">
                                <p>Telefonia</p>
                            </div>
                            <div class="col img">
                                <img src="images/pc.png" id="pc" alt="">
                                <p>Computador</p>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-5 foto-element hidden">
                            <img src="images/power.jpg" class="img-element" style="border-radius: 5px;" width="200" height="200" alt="">
                        </div>
                        <div class="col-md-6  offset-1 table-element"></div>

                    </div>
                </div>

            </div>
            <div class="alert alert-warning" style="margin-top: 5em;" role="alert">
                <strong>AVISO !</strong> Não realize nenhum tipo de manutenção sem autorização do setor de TI.
            </div>
        </div>
        <div class="text-center p-4" style="color:rgb(133, 133, 133); " >
            Desenvolvido por : Casas da Água © 2022
       </div>

    </section>
    @include('login')

    <script>
        var title = '';
        var op = '';
         $(document).on('click','#iniciar', function(){
            $('.table-init').addClass('hidden')
            $('.suporte-rapido').html('Selecione uma<span style="color: #464646">  Opção</span>')
            $('.table-options').removeClass('hidden')

        })
        $(document).on('click','.col img', function(){
            op  = $(this).attr('id')
            console.log(op)
            $.get("{{route('faq')}}", {op:op},
                (result) => {
                    $('.foto-element').removeClass('hidden')
                    $('.table-element').removeClass('hidden')
                    $('.table-element').html(result)
                    $('.table-options').addClass('hidden')
                    $('.img-element').attr('src',`images/${op}.png`)
                }
            );

        })

        $(document).on('click','.option-title', function(){
            title = $(this).attr('id')
            $('.option-all').addClass('hidden')
            $('.voltar').removeClass('op')
            $('.voltar').addClass('all')

            $(`[data-title="${title}"]`).removeClass('hidden')

        })

        $(document).on('click','.voltar.op', function(){
            $('.table-element').addClass('hidden')
            $('.table-options').removeClass('hidden')
            $('.foto-element').addClass('hidden')


        })

        $(document).on('click','.voltar.all', function(){
            $('.option-all').removeClass('hidden')
            $('.voltar').addClass('op')
            $('.voltar').removeClass('all')
            $(`[data-title="${title}"]`).addClass('hidden')
        })



    </script>


@endsection