@extends('template.halls')
@section('text-field')
@stop
@section('content')

    <link type="text/css" rel="stylesheet" href="/libraries/css-util/util.css"
          media="screen,projection"/>

    <div id="listPrefeitura" hidden>

        <div class="U_full-widht U_height-70 teal darken-2 U_padding-5 valign-wrapper U_padding-left-40
        hide-on-small-only z-depth-2" style="z-index: 9999">

            <img src="/images/fiscalizaja/fiscalizaja_logo.jpg" class="U_border-radius-50p teal U_padding-2"
                 style="height: 100%; object-fit: cover;"
            >
            <div class="U_full-widht">
                <h5 class="U_font-weight-900 U_no-margin white-text U_margin_left-10">Fiscaliza Já</h5>
                <h6 class="U_font-weight-500 U_no-margin white-text U_margin_left-10">Sistema de ouvidoria</h6>
            </div>
            <div class="U_full-widht U_margin_right-40">
                <div class="right">
                    <a href="http://www.cityconnect.com.br/br/">
                        <div class="chip teal grey-text text-lighten-4">
                            Conheça mais sobre nós
                            <i class="close material-icons">perm_contact_calendar</i>
                        </div>
                    </a>
                </div>
            </div>
        </div>

        <div class="U_full-widht U_height-60 teal darken-2 U_padding-5 U_padding-left-20 valign-wrapper hide-on-large-only">
            <img src="/images/fiscalizaja/fiscalizaja_logo.jpg" class="U_border-radius-50p teal U_padding-2"
                 style="height: 100%; object-fit: cover;">
            <div class="U_widht-250">
                <h5 class="U_font-weight-900 U_no-margin white-text U_margin_left-10">Fiscaliza Já</h5>
                <h6 class="U_font-weight-500 U_no-margin white-text U_margin_left-10">Sistema de ouvidoria</h6>
            </div>
            <div class="U_full-widh">
                <div class="right">
                    <a href="http://www.cityconnect.com.br/br/" class="white-text">
                        <i class="close material-icons">perm_contact_calendar</i>
                    </a>
                </div>
            </div>
        </div>

        <div class="U_height-300 teal">

            <div class="hide-on-small-only">
                <br><br><br>
                <div class="U_center-item-horizontal U_widht-1280">
                    <blockquote class="U_no-margin" style="border-left: 5px solid #ffffff;">
                        <p class="U_no-margin white-text U_font-weight-500">De forma rápida e completamente gratuita, o
                            aplicativo Fiscaliza Já facilita o contato entre o cidadão e a prefeitura, em busca de
                            melhorias e aperfeiçoamento dos serviços prestados a população do município. O cidadão
                            poderá criar ocorrências de forma anônima ou autenticada, podendo enviar fotos do local, e a
                            prefeitura terá acesso aos registros das ocorrências através de um painel de ferramentas
                            disponível ao responsável pela gestão da ouvidoria, podendo acompanhar a situação das
                            ocorrências por quantidade, situação, categorias e localidade. Facilitando a análise e
                            encaminhamento para os setores responsáveis.</p>
                    </blockquote>
                </div>
            </div>

        </div>

        <div class="white U_widht-1280 z-depth-2 U_border-radius-8 hide-on-small-only
        U_margin_top-35" style="position: fixed; top: 380px; left: 50%; transform: translate(-50%, -50%);">

            <p class="U_font-weight-600 U_margin_left-20">Para começar escolha a sua cidade abaixo</p>

            <div class="row">

                @foreach($prefeituras->data as $prefeitura)

                    <div class="col s12 m4 l2 center padding-2"
                         style="cursor: pointer; height: 210px; margin-bottom: 20px;"
                         onclick="goHall({{ json_encode($prefeitura) }})"
                    >
                        <img src="{{ $prefeitura->logo }}" style="width: 100%; height: 150px; object-fit: cover;">
                        <p class="font-weight-800 grey-text text-darken-3 no-margin no-padding">{{ $prefeitura->nome }}</p>
                    </div>

                @endforeach

            </div>

        </div>

        <div class="U_center-all-div-fixed white z-depth-2 U_border-radius-8 U_full-widht U_height-75p-max
        U_scroll-y-auto hide-on-large-only">

            <blockquote class="U_margin_left-20">
                <p class="U_no-margin U_font-weight-600">Escolha a sua cidade abaixo</p>
            </blockquote>

            <div class="row">
                @foreach($prefeituras->data as $prefeitura)

                    <div class="col s12" onclick="goHall({{ json_encode($prefeitura) }})">

                        <img src="{{ $prefeitura->logo }}" style="width: 100%; height: 150px; object-fit: contain;">
                        <p class="U_font-weight-600 grey-text text-darken-3 U_text-center no-margin
                        no-padding">{{ $prefeitura->nome }}</p>

                    </div>

                @endforeach
            </div>

        </div>

    </div>

    <div hidden id="redirectLoad">
        <div class="row">
            <div class="col s12 center">
                <img id="defaultPrefeituraLogo"
                     style="width: 300px; height: 300px; object-fit: cover; margin-top: 10%;">
                <h5 id="defaultPrefeituraNome" class="font-weight-800 grey-text text-darken-3"></h5>
            </div>
        </div>
    </div>

    <div class="U_position-fixed U_bottom-20 U_right-30">
        {{--<span class="U_font-weight-600 grey-text text-darken-3">Sistema desenvolvido por City Connect</span>--}}
        <a href="http://www.cityconnect.com.br/br/">
            <img src="/images/fiscalizaja/city_logo.png" style="width: 130px" class="U_margin_right-20">
        </a>
    </div>

@endsection
@section('specific-scripts')

    <script type="text/javascript" src="/js/script-custom/control-cookie.js"></script>
    <script>

        const cookie = 'hallSelectCookie';

        $(document).ready(function () {

            hallSelectCookie = getCookieCustom(cookie);

            if (hallSelectCookie === null) {
                $('#listPrefeitura').removeAttr('hidden', 'hidden');
                $('#redirectLoad').attr('hidden', 'hidden');
            }

            if (hallSelectCookie !== null) {
                goHall(JSON.parse(hallSelectCookie));
            }

        });

        function goHall(data) {
            splashHall(data);
            creatCookie(cookie, JSON.stringify(data));
            window.location.href = data.url_painel + '/home';
        }

        function splashHall(data) {
            $('#listPrefeitura').attr('hidden', 'hidden');
            $('#redirectLoad').removeAttr('hidden', 'hidden');
            $('#defaultPrefeituraLogo').attr('src', data.logo);
            $('#defaultPrefeituraNome').text(data.nome);
        }

    </script>

@stop