{% extends "base.html.twig" %}
{% block title %}Novamar Contacts - NIS{% endblock %}
{% block stylesheets %}
<style>
    .contact-container{
			padding-top:15px !important;
			padding-bottom:15px !important;
			cursor: pointer;
			border-left: 3px solid white;
			margin-bottom: 0px;
			border-bottom:1px solid #e0e0e0;
		}
		.contact-container:hover{
			border-left: 3px solid orange;
		}
		.contact-initial{
			width: 35px;height: 35px;
			font-size: 20px;
			padding-top:2px;
		}
		.col-info{
			padding-top: 8px !important;
			padding-bottom: 8px !important;
		}
		.cursor-pointer{
			cursor: pointer;
		}
		.pac-container{
			z-index: 1005 !important;
		}
		.pac-container::after{
			background-image: none !important;
		}
		.pac-item{
			min-height: 50px;
			padding: 10px;
			cursor: pointer;
		}
		#topbarsearch .input-field .prefix { 
            width:0rem !important;    
            }        
        #topbarsearch nav ul li:hover, nav ul li.active {
                background-color: #fff !important;
            }
        .search-container{
        	width: 450px;
        }
        .search{
            display: inline !important;
        }
        .pagination li.active {
    		background-color: #2196F3 !important;
		}

        @media (max-width: 750px){
			.search-container{  width: 250px;}
        	.modal.modal-fixed-footer{height: 100% !important;top: 0% !important;
        		width: 100%;}
        	.modal{max-height: 100% !important;}
        }
	</style>
{% endblock %}
{% block body %}
{# {{ include('full-loader-container.twig') }} #}
{{ include("mx/nav_menu.twig", {option:'contacts'} ) }}
<main>
    <div class="row justify-content-center" id="main">
        <div class="col-12 col-lg-10">
            <div class="row card z-depth-1 mt-5">
                <!-- * * * * * Show Contacts * * * * * -->
                <div id="contacts" class="container-form" v-show="showContactsSection">
                    <button type="button" class="btn btn-light blue-text float-end" @click="tagsSection">TAGS</button>
                    <div class="clearfix"></div>
                    <div class="row">
                        <h4 class="orange-text col-8">Contacts</h4>
                        <div class="col-12 col-lg-4 d-flex align-items-center" style="gap:10px">
                            <i class="fa fa-search fs-4 grey-text" aria-hidden="true"></i>
                            <input type="text" class="search" placeholder="Search contact">
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <ul class="list">
                        <li v-for="cont in contacts" class="row contact-container" @click="runContactModal('show', cont.id_contact)">
                            <div class="col-2 col-md-1">
                                <div class="circle blue white-text center-align contact-initial" style="">
                                    <span>[[ cont.first_name[0] ]]</span>
                                </div>
                            </div>
                            <div class="col-10 col-md-4 col-lg-5 d-flex align-items-center name">
                                <h6 class="text-truncate"><span v-if="cont.first_name.length">[[ cont.first_name ]] [[ cont.last_name ]]</span><span v-else>[[ cont.company_name ]]</span></h6>
                            </div>
                            <div class="col-3 d-flex align-items-center d-none d-md-block email">
                                <h6 class="text-truncate" v-text="cont.email"></h6>
                            </div>
                            <div class="col-3 d-flex align-items-center d-none d-md-block phone">
                                <h6 class="text-truncate" v-text="cont.primary_phone"></h6>
                            </div>
                            <div class="clearfix"></div>
                        </li>
                    </ul>
                    <div class="text-center">
                        <ul class="pagination"></ul>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <!-- * * * * * Show all Tags * * * * * -->
                <div id="all-tags" class="container-form" v-show="showTagsSection">
                    <button type="button" class="btn btn-light blue-text float-end" @click="contactsSection">CONTACTS</button>
                    <div class="clearfix"></div>
                    <div class="row">
                        <h4 class="orange-text col-12 col-lg-8">Tags</h4>
                        <div class="col-12 col-lg-4 d-flex align-items-center" style="gap:10px">
                            <i class="fa fa-search fs-4 grey-text" aria-hidden="true"></i>
                            <input type="text" class="search" placeholder="Search contact">
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <ul class="list">
                        <li v-for="t in tags" v-if="tags.length" class="row contact-container" @click="tagDescription(t.id_tag, t.tag_name)">
                            <div class="co-2 col-md-1">
                                <div class="circle blue white-text center-align contact-initial" style="">
                                    <span>[[ t.tag_name[0] ]]</span>
                                </div>
                            </div>
                            <div class="col-10 col-md-4 col-lg-5 d-flex align-items-center name">
                                <i class="material-icons left orange-text">label</i>
                                <h6 class="text-truncate" v-text="t.tag_name"></h6>
                            </div>
                        </li>
                        <li class="col-12 text-center" v-else>
                            <b class="grey-text">Apparently no tag was found</b>
                        </li>
                    </ul>
                    <div class="text-center">
                        <ul class="pagination"></ul>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <!-- * * * * * Show Tag * * * * * -->
                <div id="tag" class="container-form" v-if="showTagDescription">
                    <button type="button" class="btn btn-light blue-text float-end" @click="tagsSection">TAGS</button>
                    <button type="button" class="btn-flat waves-effect waves-orange right blue-text" @click="contactsSection">CONTACTS</button>
                    <div class="clearfix"></div>
                    <h4 class="orange-text"><i class="material-icons prefix">label</i> [[ titleTagName ]]</h4>
                    <ul>
                        <li v-for="tc in tagContacts" class="row contact-container" @click="runContactModal('show', tc.id_contact)">
                            <div class="col l1 m1 s2">
                                <div class="circle blue white-text center-align contact-initial" style="">
                                    <span>[[ tc.first_name[0] ]]</span>
                                </div>
                            </div>
                            <div class="col l5 m4 s10 d-flex align-items-center">
                                <h6 class="text-truncate"><span v-if="tc.first_name.length">[[ tc.first_name ]] [[ tc.last_name ]]</span><span v-else>[[ tc.company_name ]]</span></h6>
                            </div>
                            <div class="col l3 m3 d-flex align-items-center d-none d-md-block">
                                <h6 class="text-truncate" v-text="tc.email"></h6>
                            </div>
                            <div class="col l3 m3 d-flex align-items-center d-none d-md-block">
                                <h6 class="text-truncate" v-text="tc.primary_phone"></h6>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="position-fixed bottom-0 end-0 m-3 m-md-4">
                <a class="p-0 btn btn-large rounded-circle teal d-flex align-items-center justify-content-center add-circle" @click="runContactModal('form')">
    		        <i class="fa fa-plus text-white" aria-hidden="true"></i>
                </a>
            </div>
            <!-- Modal -->
            {# {{ include('mx/modals/contact-modal.twig') }} #}
            <div class="clearfix"></div>
            <div class="center-align grey-text">
                Novamar Contacts v1.0
            </div>
        </div>
    </div>
</main>
{% endblock %}
{% block javascripts %}
{# <script src="{{ app.asset_path }}/assets/js/main.js"></script>
<script type="text/javascript" src="https://unpkg.com/vue@2.3.4/dist/vue.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&key=AIzaSyArJXJ0pSlScH82NkwMdz5rwJs1fKZWYps" defer></script>
<script src="{{ app.asset_path }}/assets/js/jquery.geocomplete.js" defer></script>
<script src="{{ app.asset_path }}/assets/js/logger.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js" defer></script>
<script type="text/javascript" src="{{ app.asset_path }}/assets/js/complements/contacts.js" defer></script>
<script type="text/javascript" src="{{ app.asset_path }}/assets/js/jquery.autocomplete.min.js" defer></script> #}
{% endblock %}