#{extends 'main.html'/}


<div class="profile">
    <div class="profile-header">
        <!-- BEGIN profile-header-cover -->
        <div class="profile-header-cover"></div>
        <!-- END profile-header-cover -->
        <!-- BEGIN profile-header-content -->
        <div class="profile-header-content">
            <!-- BEGIN profile-header-img -->

            <!-- END profile-header-info -->
        </div>
        <!-- END profile-header-content -->
        <!-- BEGIN profile-header-tab -->
        <ul class="profile-header-tab nav nav-tabs">
            <li class="nav-item"><a href="#info" class="nav-link active" data-toggle="tab">ΣΤΟΙΧΕΙΑ</a></li>
            <li class="nav-item"><a href="#projects" class="nav-link " data-toggle="tab">ΕΡΓΑ</a></li>
            <li class="nav-item"><a href="#document" class="nav-link" data-toggle="tab">ΕΓΓΡΑΦΑ</a></li>
            <li class="nav-item"><a href="#graphic" class="nav-link" data-toggle="tab">ΓΡΑΦΙΚΑ</a></li>
            <li class="nav-item"><a href="#deliverable" class="nav-link" data-toggle="tab">ΠΑΡΑΔΟΤΕΑ</a>
            </li>

        </ul>
        <!-- END profile-header-tab -->
    </div>
    <div class="profile-content">
        <!-- begin tab-content -->
        <div class="tab-content p-0">
            <!-- begin #profile-post tab -->
            <div class="tab-pane fade active show" id="info">
            #{form  @controllers.Contacts.doAddPerson(person?.id),  id:'personForm'}
            <div class="row">
                <div class="col">
                    <div class="panel panel-inverse">
                        <!-- begin panel-heading -->
                        <div class="panel-heading">
                            <h4 class="panel-title">Στοιχεία συνεργάτη</h4>
                        </div>
                        <!-- end panel-heading -->
                        <!-- begin panel-body -->
                        <div class="panel-body">
                            <div class="form-row">
                                <div class="col-md-8">
                                    <div class="form-row">
                                        <div class="col-md-4 mb-3">
                                            <label for="validationServer02">Όνομα</label>
                                            <input type="text" class="form-control" name="firstname"
                                                   id="validationServer02"
                                                   value="${flash.firstName == null ? person?.firstName : flash.firstName}"
                                                   required>
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <label for="validationServer02">Επώνυμο</label>
                                            <input type="text" class="form-control" name="lastname"
                                                   id="validationServer02"
                                                   value="${flash.lastName == null ? person?.lastName : flash.lastName}"
                                                   required>
                                        </div>
                                        <div class="col-md-4">
                                            <label>Τύπος επαφής</label>
                                            <select id="personType" name="personType" class="form-control">
                                                <option value="0" ${flash.personType == null ? person?.personType?.equals(person?.personType?.CONTACT)?"selected='selected'":"" : flash.personType == "0"?"selected='selected'":""}>
                                                    Επαφή
                                                </option>
                                                <option value="1" ${flash.personType == null ? person?.personType?.equals(person?.personType?.ASSOCIATE)?"selected='selected'":"" : flash.personType == "1"?"selected='selected'":""}>
                                                    Συνεργάτης
                                                </option>
                                            </select>
                                        </div>

                                    </div>
                                    <div class="form-row">
                                        <div class="col-xs-12 col-sm-3 mb-3">
                                            <label>Τηλέφωνο</label>
                                            <input type="text" class="form-control" name="landline" id="landline"
                                                   value="${flash.landline == null ? person?.contactInfo?.landline : flash.landline}">
                                        </div>
                                        <div class="col-xs-12 col-sm-3 mb-3">
                                            <label>Κινητό</label>
                                            <input type="text" class="form-control" name="mobile" id="mobile"
                                                   value="${flash.mobile == null ? person?.contactInfo?.mobile : flash.mobile}">
                                        </div>
                                        <div class="col-xs-12 col-sm-6 mb-3">
                                            <label>Email</label>
                                            <input type="text" class="form-control" name="email" id="email"
                                                   value="${flash.email == null ? person?.contactInfo?.email : flash.email}">

                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                      

                                    </div>
                                </div>


                            </div>
                            <div class="panel-footer">
                                <div class="form-inline">
                                    <div class="col-1">
                                        <a href="@{controllers.Contacts.filterContacts("associates")}" class="btn btn-grey">Επιστροφή
                                        </a>
                                    </div>
                                    <div class="col-1">
                                        <button id="btnSubmit" type="submit" class="btn btn-success">
                                            #{if person?.id == null} Εισαγωγή #{/if} #{else} Ενημέρωση  #{/else}
                                        </button>
                                    </div>

                                    <div class="col-3">
                                        <a href="#"  class="btn btn-md btnRegister btn-purple">
                                                                                       Αποστολή πρόσκλησης εγγραφής στο σύστημα
                                        </a>
                                    </div>

                                </div>
                            </div>
                            <!-- end panel-body -->
                        </div>
                    </div>
                </div>
            #{/form}
            </div>

            </div>
            <div class="tab-pane fade" id="projects">
                <div id="listProjects"></div>
            </div>
            <div class="tab-pane fade" id="deliverable">
                <div id="listProjectDeliverables" class="p-t-10"></div>
            </div>
            <div class="tab-pane fade" id="document">
                <div id="listDocuments" class="p-t-20"></div>
            </div>
            <div class="tab-pane fade" id="graphic">
                <div id="listProjectImages" class="p-t-20"></div>
            </div>

            <div class="tab-pane fade" id="review">
                <div class="form-row">
                    <div class="col-md-6">

                        <div class="cardbox shadow-lg bg-white">

                            <div class="cardbox-heading">
                                <!-- START dropdown-->
                                <div class="dropdown float-right">
                                    <button class="btn btn-flat btn-flat-icon" type="button" data-toggle="dropdown"
                                            aria-expanded="false">
                                        <em class="fa fa-ellipsis-h"></em>
                                    </button>
                                    <div class="dropdown-menu dropdown-scale dropdown-menu-right" role="menu"
                                         style="position: absolute; transform: translate3d(-136px, 28px, 0px); top: 0px; left: 0px; will-change: transform;">
                                        <a class="dropdown-item" href="#">Hide post</a>
                                        <a class="dropdown-item" href="#">Stop following</a>
                                        <a class="dropdown-item" href="#">Report</a>
                                    </div>
                                </div><!--/ dropdown -->
                                <div class="media m-0">
                                    <div class="d-flex mr-3">
                                        <a href=""><img class="img-fluid rounded-circle"
                                                        src="http://www.themashabrand.com/templates/bootsnipp/post/assets/img/users/4.jpg"
                                                        alt="User"></a>
                                    </div>
                                    <div class="media-body">
                                        <p class="m-0">Benjamin Robinson</p>
                                        <small><span><i class="icon ion-md-pin"></i> Nairobi, Kenya</span></small>
                                        <small><span><i class="icon ion-md-time"></i> 10 hours ago</span></small>
                                    </div>
                                </div><!--/ media -->
                            </div><!--/ cardbox-heading -->

                            <div class="cardbox-item">
                                <img class="img-fluid"
                                     src="http://www.themashabrand.com/templates/bootsnipp/post/assets/img/1.jpg"
                                     alt="Image">
                            </div><!--/ cardbox-item -->
                            <div class="cardbox-base">
                                <ul class="float-right">
                                    <li><a><i class="fa fa-comments"></i></a></li>
                                    <li><a><em class="mr-5">12</em></a></li>
                                    <li><a><i class="fa fa-share-alt"></i></a></li>
                                    <li><a><em class="mr-3">03</em></a></li>
                                </ul>
                                <ul>
                                    <li><a><i class="fa fa-thumbs-up"></i></a></li>
                                    <li><a href="#"><img
                                            src="http://www.themashabrand.com/templates/bootsnipp/post/assets/img/users/3.jpeg"
                                            class="img-fluid rounded-circle" alt="User"></a></li>
                                    <li><a href="#"><img
                                            src="http://www.themashabrand.com/templates/bootsnipp/post/assets/img/users/1.jpg"
                                            class="img-fluid rounded-circle" alt="User"></a></li>
                                    <li><a href="#"><img
                                            src="http://www.themashabrand.com/templates/bootsnipp/post/assets/img/users/5.jpg"
                                            class="img-fluid rounded-circle" alt="User"></a></li>
                                    <li><a href="#"><img
                                            src="http://www.themashabrand.com/templates/bootsnipp/post/assets/img/users/2.jpg"
                                            class="img-fluid rounded-circle" alt="User"></a></li>
                                    <li><a><span>242 Likes</span></a></li>
                                </ul>
                            </div><!--/ cardbox-base -->
                            <div class="cardbox-comments">
			  <span class="comment-avatar float-left">
			   <a href=""><img class="rounded-circle"
                               src="http://www.themashabrand.com/templates/bootsnipp/post/assets/img/users/6.jpg"
                               alt="..."></a>
			  </span>
                                <div class="search">
                                    <input placeholder="Write a comment" type="text">
                                    <button><i class="fa fa-camera"></i></button>
                                </div><!--/. Search -->
                            </div><!--/ cardbox-like -->

                        </div><!--/ cardbox -->

                    </div>
                </div>

            </div>


            <!-- end tab-content -->
        </div>


    </div>


    <script>
        $(document).ready(function () {


//            $('a[href=#deliverable]').tab('active');




            var listAction = #{jsAction @controllers.Projects.listProjects(person?.id)/}
                    $("#listProjects").load(listAction(), function () {
                        $("#listProjects").show();

                    })

            var listDocAction = #{jsAction @controllers.Contacts.listPersonDeliverables(person?.id)/}
                    $("#listProjectDeliverables").load(listDocAction(), function () {
                        $("#listProjectDeliverables").show();

                    })

            var listDocAction = #{jsAction @controllers.Contacts.listPersonImages(person?.id)/}
                    $("#listProjectImages").load(listDocAction(), function () {
                        $("#listProjectImages").show();

                    })

            var listDocAction = #{jsAction @controllers.Application.listDocuments(null,null, null, person?.id)/}
                    $("#listDocuments").load(listDocAction(), function () {
                        $("#listDocuments").show();

                    })




        });
        $('.date').datepicker({
            startView: 2,
            language: "el",
            format: 'dd-mm-yyyy',
            autoclose: true
        });


    </script>