@extends('templateMaterializeV0-100-2.base')
@section('content')

    @php($user = session('user'))

    <link type="text/css" rel="stylesheet"
          href="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('css/screen-specific/user-interaction/index.css') }}"
          media="screen,projection"/>

    <link href="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('/vendors/dropify/css/dropify.min.css') }}"
          type="text/css" rel="stylesheet">

    <link href="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('/css/load-simple.css') }}"
          type="text/css" rel="stylesheet">

    <div class="light-blue U_full-widht U_height-250">

    </div>

    <div class="white z-depth-3 U_widht-500p U_height-300 U_center-all-div-fixed U_widht-1366
    U_height-680 U_border-radius-5 U_padding-20">

        <input hidden id="_token" value="{{ csrf_token() }}">

        <div class="row U_height-680" id="contentChatBeforeSwitchCategoria" hidden>

            <div class="col s4 U_height-100p U_padding-left-none">

                <div hidden id="side-left-1">

                    <div class="white U_height-70 U_full-widht valign-wrapper U_padding-5 U_border-radius-8 z-depth-1">
                        <div class="U_widht-50">
                            @include('templateMaterializeV0-100-2.components.thumbnail')
                        </div>
                        <div class="U_widht-400">
                            <p class="grey-text text-darken-3 U_margin_left-10 U_no-margin-top U_no-margin-bottom U_font-weight-600">{{ $user->nome }}</p>
                            <p class="grey-text text-darken-3 U_margin_left-10 U_no-margin-top U_no-margin-bottom"
                               id="chosenCategoriaName"></p>
                        </div>

                        <div class="U_full-widht">
                            <a class="waves-effect btn-floating waves-light btn-flat U_right" onclick="showSideLeft2()">

                                <i class="material-icons grey-text text-darken-3">menu
                                </i>

                            </a>
                        </div>

                    </div>

                    <br>

                    <div class="grey lighten-4 U_height-50 U_full-widht valign-wrapper U_padding-5 U_border-radius-8 z-depth-1">

                        <a class="waves-effect btn-floating waves-light btn-flat ACTION_do_search">
                            <i class="material-icons grey-text">search</i>
                        </a>

                        <a class="waves-effect btn-floating waves-light btn-flat ACTION_show-show-advanced-filter">
                            <i class="material-icons grey-text">filter_list</i>
                        </a>

                        <a class="waves-effect btn-floating waves-light btn-flat ACTION_close-show-advanced-filter U_remove">
                            <i class="material-icons grey-text">filter_list</i>
                        </a>

                        <input type="text" class="browser-default U_center-item-horizontal U_border-radius-20
                        S_input-search U_height-30 U_padding-left-20" placeholder="Busque pelo nome das pessoas"
                               id="userInputSearch">

                    </div>

                    <div hidden id="filtersAdvance">

                        <br>

                        <div class="white U_height-200 U_full-widht U_padding-5 U_border-radius-8 z-depth-1">

                            <div class="row U_no-margin">
                                <div class="col s2 U_no-margin U_no-padding">

                                    <div class="U_height-190 U_scroll-y-auto">

                                        <div class="col s12 U_no-margin U_no-padding">
                                            <a class="btn-floating btn-flat waves-effect teal ACTION_SELECT_FILTER"
                                               id="filter-bairro-btn">
                                                <i class="material-icons black-text">location_city</i>
                                            </a>
                                        </div>

                                        <div class="col s12 U_no-margin U_no-padding">
                                            <a class="btn-floating btn-flat waves-effect ACTION_SELECT_FILTER"
                                               id="filter-group-btn" onclick="getGroups()">
                                                <i class="material-icons black-text">group</i>
                                            </a>
                                        </div>

                                        <div class="col s12 U_no-margin U_no-padding">
                                            <a class="btn-floating btn-flat waves-effect ACTION_SELECT_FILTER"
                                               id="filter-secretaria-btn"
                                               onclick="doSearch(null, true)"
                                            >
                                                <i class="material-icons black-text">domain</i>
                                            </a>
                                        </div>

                                        <div class="col s12 U_no-margin U_no-padding">
                                            <a class="btn-floating btn-flat waves-effect ACTION_SELECT_FILTER"
                                               id="filter-birthday-btn"
                                               onclick="doSearch('{{ Carbon\Carbon::now()->format('Y-m-d') }}')">
                                                <i class="material-icons black-text">cake</i>
                                            </a>
                                        </div>
                                    </div>

                                </div>

                                <div class="col s10 U_no-margin U_no-padding">

                                    <div id="filter-bairro" {{--class="U_remove"--}}>
                                        @include('telas.user-interaction.component.filter-user-bairro', ['bairros' => $bairros])
                                    </div>

                                    <div id="filter-group" class="U_remove">

                                    </div>

                                    <div id="filter-secretaria" class="U_remove">
                                        @include('telas.user-interaction.component.filter-user-secretaria', ['data' => []])
                                    </div>

                                    <div id="filter-birthday" class="U_remove">
                                        @include('telas.user-interaction.component.filter-user-birthday', ['group' => []])
                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                    <form id="form-user-check">
                        <div class="U_full-widht U_margin_top-10 U_scroll-y-auto U_height-500 U_padding-5 U_border-radius-10"
                             id="users_component_recipients">
                        </div>
                    </form>

                </div>

                <div hidden id="side-left-2">

                    <div class="white U_height-630 U_full-widht U_no-padding U_border-radius-8 z-depth-1">

                        <div class="valign-wrapper U_padding-10">
                            <h5 class="font-weight-500 grey-text text-darken-2 U_no-margin">Configurações</h5>

                            <div class="U_full-widht">
                                <a class="waves-effect btn-floating waves-light btn-flat U_right"
                                   onclick="showSideLeft1()">
                                    <i class="material-icons grey-text text-darken-2" id="side-menu-icon"></i>
                                </a>
                            </div>

                        </div>

                        <br><br>

                        <div class="U_padding-10 U_hover-grey U_mouse-click">
                            <a href="/user-interaction">
                                <div class="U_full-widht valign-wrapper U_full-widht">
                                    <i class="material-icons black-text U_margin_right-20">list</i>
                                    <span class="grey-text text-darken-3 U_font-weight-400">Trocar de Secretaria</span>
                                </div>
                            </a>
                        </div>

                        <div class="U_padding-10 U_hover-grey U_mouse-click" onclick="listScheduling()">
                            <div class="U_full-widht valign-wrapper U_full-widht">
                                <i class="material-icons black-text U_margin_right-20">today</i>
                                <span class="grey-text text-darken-3 U_font-weight-400">Agendamentos</span>
                            </div>
                        </div>

                        <div class="U_padding-10 U_hover-grey U_mouse-click" onclick="openModalCreateUser()">
                            <div class="U_full-widht valign-wrapper U_full-widht">
                                <i class="material-icons black-text U_margin_right-20">face</i>
                                <span class="grey-text text-darken-3 U_font-weight-400">Cadastro de Municipe</span>
                            </div>
                        </div>

                        <div class="U_padding-10 U_hover-grey U_mouse-click" onclick="openModalCreateGroup()">
                            <div class="U_full-widht valign-wrapper U_full-widht">
                                <i class="material-icons black-text U_margin_right-20">group</i>
                                <span class="grey-text text-darken-3 U_font-weight-400">Cadastro de Grupo</span>
                            </div>
                        </div>

                        <div class="U_padding-10 U_position-absolute U_bottom-30 U_hover-grey U_mouse-click">
                            <a href="/home">
                                <div class="U_full-widht valign-wrapper U_full-widht">
                                    <i class="material-icons black-text U_margin_right-20">exit_to_app</i>
                                    <span class="grey-text text-darken-3 U_font-weight-400">Sair</span>
                                </div>
                            </a>
                        </div>

                    </div>

                </div>

            </div>

            <div class="col s8 U_height-100p U_padding-right-none">
                <div hidden class="U_padding-top-20 U_height-70 U_full-widht U_padding-5 U_border-radius-8 z-depth-1"
                     id="HEADER_MENSSAGE_MULTIPLE">

                    <div id="HEADER_MENSSAGE_MULTIPLE_CHIPS">

                    </div>

                    <a class='dropdown-trigger U_mouse-click btn-floating waves-light btn-flat U_position-absolute
                    U_top_right_30' data-target='usersMultipleSelect'>
                        <i class="material-icons grey-text">more_vert</i>
                    </a>

                    <ul id='usersMultipleSelect' data-constrainwidth="false"
                        class='dropdown-content U_widht-250 U_top-100p grey-text'>

                        <li hidden id="liOpenModalAlluserSelect">
                            <a class="U_mouse-click grey-text" onclick="openModalAlluserSelect()">
                                <i class="material-icons grey-text">view_module</i>Usuários Selecionados</a>
                        </li>

                        <li class="divider"></li>

                        <li>
                            <a class="U_mouse-click grey-text" onclick="openModalSchedule()">
                                <i class="material-icons grey-text">calendar_today</i>
                                Agendamento
                            </a>
                        </li>

                        <li class="divider"></li>

                        <li>
                            <a class="U_mouse-click grey-text" onclick="openModalAddUsers()">
                                <i class="material-icons grey-text">group_add</i>
                                Adicionar ao Grupo
                            </a>
                        </li>

                        <li>
                            <a class="U_mouse-click grey-text" onclick="deleteGroup()">
                                <i class="material-icons grey-text">delete</i>
                                Deletar o Grupo
                            </a>
                        </li>

                    </ul>

                </div>
                <div id="chat_component_recipients">

                </div>

                <br>

                <div id="chat_component_recipients_2">

                </div>

                <div id="loadChat" class="U_full-widht U_full-height-fixed valign-wrapper U_remove">
                    <div class="center U_full-widht">

                        <a class="btn-floating btn-large waves-effect waves-light U_animation-color-change">
                            <i class="material-icons">timer</i>
                        </a>

                    </div>
                </div>

            </div>

        </div>

    </div>

    <div hidden id="modalInitial">

        <h5 class="U_font-weight-600 grey-text text-darken-3 U_no-margin-top">Secretarias</h5>
        <p>Escolha qual suas secretaria associada a seu usuário ira interagir com os outros usuários.</p>

        <br>

        <div class="row U_scroll-y-auto U_height-270">

            <form id="switchCategoriaForm">

                @foreach($categoriasByUser as $categoria)

                    <div class="col s4">

                        <p class="U_no-margin">
                            <label>
                                <input class="with-gap" name="categoria_id" type="radio"
                                       value="{{ json_encode($categoria) }}"
                                       id="categoria-{{ $categoria->id }}"/>
                                <span>{{ $categoria->nome }}</span>
                            </label>
                        </p>

                    </div>

                @endforeach

            </form>

        </div>

        <br>

        <div class="U_full-widht">
            <a class="modal-action waves-effect waves-green btn right" onclick=switchCategoria()>Escolher</a>
            <a href="/home" class="modal-action modal-close waves-effect waves-green btn-flat right">Cancelar</a>
        </div>
    </div>

    <div hidden id="modal-send-chat">

        <div class="PRE_SEND">
            <h5 class="U_font-weight-600 grey-text text-darken-3 U_no-margin-top">Envio</h5>
            <p>Abaixo estão os meio disponivel para o envio da sua mensagem com os limites disponíveis.</p>

            <br>

        </div>

        <div id="chat-component-type-send">
        </div>

    </div>

    <div hidden id="modal-message-template">

    </div>

    <div hidden id="modal-full-img">

        <img onerror="this.src='http://api-ouvidoria/files_default/img/img_404.jpg';"
             class="U_responsive-photo U_full-widht U_height-450-max" id="img_full_in_modal">

        <a class="waves-effect btn-floating btn-flat S_close-modal-full"
           onclick="closeImgFull()">
            <i class="material-icons grey-text">close</i>
        </a>

    </div>

    <div hidden id="modal-all-users-select">

        <div class="row">
            <div class="col s12">
                <h5>Outros Usuários selecionados</h5>

                <a class="waves-effect btn-floating btn-flat U_btn-close-modal" onclick="closeModalAllUserSelect()">
                    <i class="material-icons grey-text">close</i>
                </a>

            </div>
        </div>

        <div class="row">
            <div class="col s4">
                <div id="contentAlluserSelectMoreVert">

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

    </div>

    <input hidden type="text" id="dateScheduling" class="datepicker">
    <input hidden type="text" id="timeScheduling" class="timepicker">

    <div hidden id="modal-message-scheduling">
        <div class="row">
            <div class="col s12 U_no-padding left">
                <h5 class="U_font-weight-600 grey-text text-darken-3 U_no-margin">Agendamento</h5>
                <p class="U_no-margin U_font-weight-500 grey-text">Defina a baixo os detalhes do seu agendamento</p>
            </div>
        </div>

        <div class="row">
            <div class="col s12 U_no-padding">
                <p class="U_no-margin U_font-weight-500 grey-text">Mensagen:</p>
                <textarea id="menssageScheduling" class="browser-default U_border-radius-8 U_height-150 U_text-uppercase U_no-resize
                U_no-outline" placeholder="Sua mensagem aqui"></textarea>

                <a id="timeEmpty" class="waves-effect btn-floating btn-flat right" onclick="openTimePickerSchedule()">
                    <i class="material-icons grey-text">access_time</i>
                </a>

                <a id="dateEmpty" class="waves-effect btn-floating btn-flat right" onclick="openDatePickerSchedule()">
                    <i class="material-icons grey-text">date_range</i>
                </a>

                <div id="timeReady"
                     class="chip U_no-padding valign-wrapper U_border-radius-30 U_height-auto right U_remove">
                    <a class="waves-effect btn-floating btn-flat left valign-wrapper"
                       onclick="openTimePickerSchedule()">
                        <i class="material-icons grey-text">access_time</i>
                    </a>
                    <span class="U_padding-right-15"></span>
                </div>

                <div id="dateReady"
                     class="chip U_no-padding valign-wrapper U_border-radius-30 right U_height-auto U_remove">
                    <a class="waves-effect btn-floating btn-flat left valign-wrapper"
                       onclick="openDatePickerSchedule()">
                        <i class="material-icons grey-text">date_range</i>
                    </a>
                    <span class="U_padding-right-15"></span>
                </div>

            </div>
        </div>

        <div class="row">
            <div class="col s12 U_no-padding">
                <p class="U_no-margin U_font-weight-500 grey-text">Tipos de envio:</p>

                <div id="contentTypeSends">

                </div>

                <p class="valign-wrapper">
                    <label class="valign-wrapper">
                        <input name="typeBalanceScheduling[]" type="checkbox" class="filled-in" value="3"/>
                        <span>Email</span>
                        <span class="U_no-margin">&nbsp;&nbsp; / Limite Atual: Inlimitado</span>
                    </label>
                </p>

            </div>
        </div>

        <div>
            <a class="modal-action waves-effect waves-green btn right" onclick="doScheduling()">salvar</a>
            <a class="btn btn-flat waves-effect right" onclick="closeModalSchedule()">Cancelar</a>
        </div>

    </div>

    <div hidden id="modal-message-scheduling-list">

        <a class="waves-effect btn-floating btn-flat U_btn-close-modal" onclick="closeModalListScheduling()">
            <i class="material-icons grey-text">close</i>
        </a>

        <div class="row">
            <div class="col s12 U_no-padding left">
                <h5 class="U_font-weight-600 grey-text text-darken-3 U_no-margin">Agendamentos</h5>
                <p class="U_no-margin U_font-weight-500 grey-text">Abaixo é listado todos os agedamentos criados</p>
            </div>
        </div>

        <br>

        <div id="schedule-list-content" class="U_scroll-y-auto U_height-450-max">

        </div>

    </div>

    <div hidden id="modal-create-user">

        <div class="row">
            <div class="col s12 U_no-padding left">
                <h5 class="U_font-weight-600 grey-text text-darken-3 U_no-margin">Cadastro do Munícipe</h5>
            </div>
        </div>

        <br>

        <div class="row">

            <div class="input-field col s12">
                <input id="createUserEmail" name="createUserEmail" type="email" autocomplete="off">
                <label for="createUserEmail">Email</label>
                <span class="helper-text" data-success="ok"></span>
            </div>

            <div class="input-field col s12">
                <input id="createUserName" name="createUserName" type="email">
                <label for="createUserName">Nome</label>
            </div>

            <div class="input-field col s12">
                <input id="createUserCelular" name="createUserCelular" type="text">
                <label for="createUserCelular">Celular</label>
            </div>

        </div>

        <div>
            <a class="modal-action waves-effect waves-green btn right" disabled="true" id="createUserBtnCreate"
               onclick="doCreateUser()">salvar</a>
            <a class="btn btn-flat waves-effect right" onclick="closeModalCreateUser()">Cancelar</a>
        </div>

    </div>

    <div hidden id="modal-create-group">

        <div class="row">
            <div class="col s12 U_no-padding left">
                <h5 class="U_font-weight-600 grey-text text-darken-3 U_no-margin">Cadastro de Grupo</h5>
            </div>
        </div>

        <br>

        <div class="row">

            <div class="input-field col s12">
                <input id="createGroupName" name="createGroupName" type="text">
                <label for="createGroupName">Nome</label>
                <span class="helper-text" data-success="ok"></span>
            </div>

        </div>

        <div>
            <a class="modal-action waves-effect waves-green btn right" disabled="true" id="createGroupBtnCreate"
               onclick="doCreateGroup()">salvar</a>
            <a class="btn btn-flat waves-effect right" onclick="closeModalCreateGroup()">Cancelar</a>
        </div>

    </div>

    <div hidden id="modal-add-user-group">

        <div class="row">
            <div class="col s12 U_no-padding left">
                <h5 class="U_font-weight-600 grey-text text-darken-3 U_no-margin">Adicionar munícipes</h5>
            </div>
        </div>

        <br>

        <div class="row">

            <div class="input-field col s12">
                <select id="select-add-grupo">
                </select>
                <label>Grupos</label>
            </div>

        </div>

        <div>
            <a class="modal-action waves-effect waves-green btn right" disabled="true" id="addUserGroupBtnCreate"
               onclick="doAddUsersToGroup()">salvar</a>
            <a class="btn btn-flat waves-effect right" onclick="modalSimple.close('modal-add-user-group')">Cancelar</a>
        </div>

    </div>

    <div hidden id="modal-confirme">

        <div class="row">
            <div class="col s12 U_no-padding left">
                <h5 class="U_font-weight-600 grey-text text-darken-2 U_no-margin"
                    id="modalConfirmeTitle"></h5>
            </div>
        </div>

        <br><br>

        <div>
            <a class="modal-action waves-effect waves-green btn right" id="modalConfirmeBtnDoAction"

            ></a>
            <a class="btn btn-flat waves-effect right" onclick="modalSimple.close('modal-confirme')">Cancelar</a>
        </div>

    </div>

    <input id="file_base64" value="" hidden>

@endsection
@section('specific-scripts')

    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('js/modal-simple.js') }}"></script>

    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('js/load-simple.js') }}"></script>

    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('js/AlphabetToColors.js') }}"></script>

    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('/js/jquery.mask.min.js') }}"></script>

    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('js/screen-specific/user-interaction/boot-element.js') }}"></script>

    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('js/screen-specific/user-interaction/index.js') }}"></script>

    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('js/screen-specific/user-interaction/user-component.js') }}"></script>

    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('js/screen-specific/user-interaction/chat-component.js') }}"></script>

    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('js/screen-specific/user-interaction/message-template.js') }}"></script>

    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('js/screen-specific/user-interaction/multiple-user-select.js') }}"></script>

    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('js/screen-specific/user-interaction/message-scheduling.js') }}"></script>

    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('js/screen-specific/user-interaction/create-user.js') }}"></script>

    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('js/screen-specific/user-interaction/filters-user.js') }}"></script>

    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('js/screen-specific/user-interaction/filter-group-user.js') }}"></script>

    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('js/screen-specific/user-interaction/create-group.js') }}"></script>

    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('/vendors/dropify/js/dropify.min.js') }}"></script>

    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('/js/script-custom/encode-base64.js') }}"></script>
    <script>
        apiUrl = '{{ custom_system('API_URL') . '/' }}'
    </script>
@stop