#{extends 'main.html'/}

<div class="profile">
    <div class="profile-header">
        <div class="profile-header-cover"></div>
        <div class="profile-header-content">
            <div class="profile-header-info">
                <h4 class="m-t-10 m-b-5">${project?.name}</h4>
            </div>
        </div>

        <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="#document" class="nav-link" data-toggle="tab">ΕΓΓΡΑΦΑ</a></li>
            <li class="nav-item"><a href="#deliverable" class="nav-link" data-toggle="tab">ΠΑΡΑΔΟΤΕΑ</a>
            </li>
            <li class="nav-item"><a href="#review" class="nav-link" data-toggle="tab">ΓΡΑΦΙΚΑ</a></li>
        #{if !_USER.roleInfo?.roleName.equals("viewer")}
            <li class="nav-item"><a href="#associates" class="nav-link" data-toggle="tab">ΣΥΝΕΡΓΑΤΕΣ</a></li>
        #{/if}
        </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.Projects.doAddProject(project?.id),  id:'projectForm'}
                <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 col-lg-3 mb-3">
                                                <label for="validationServer03">Κατάσταση</label>
                                                <select id="status" name="status"
                                                        class="form-control input-md">
                                                    <option value='1' ${project?.status=="1"?"selected='selected'":""}>
                                                        Υπο συζήτηση
                                                    </option>
                                                    <option value='2' ${project?.status=="2"?"selected='selected'":""}>
                                                        Ένεργο
                                                    </option>
                                                    <option value='3' ${project?.status=="3"?"selected='selected'":""}>
                                                        Ολοκληρωμένο
                                                    </option>


                                                </select>
                                            </div>

                                        </div>
                                        <div class="form-row">
                                            <div class="col-md-4 mb-3">
                                                <label for="validationServer02">Όνομασία Έργου</label>
                                                <input type="text" class="form-control" name="name"
                                                       id="validationServer02"
                                                       value="${flash.name == null ? project?.name : flash.name}"
                                                       required>
                                                <div class="invalid-feedback">
                                                    Παρακαλώ εισάγετε μια ονομασία για το έργο
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-lg-2 mb-3">
                                                <label for="validationServer15"> Ημ. Έναρξής</label>
                                                <div class="input-group date" id="datetimepicker1">
                                                    <input type="text" name="projectStartDateString"
                                                           class="form-control"
                                                           id="validationServer15"
                                                           data-date-format="dd-mm-yyyy"
                                                           value="${flash.projectStartDate == null ? project?.projectStartDate?.toDate()?.format("dd-MM-yyyy"): flash.projectStartDate}">
                                                    <div class="input-group-addon">
                                                        <i class="fa fa-calendar"></i>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-lg-2 mb-3">
                                                <label for="validationServer15"> Ημ. Λήξης</label>
                                                <div class="input-group date" id="datetimepicker1">
                                                    <input type="text" name="projectDeliverDateString"
                                                           class="form-control"
                                                           id="validationServer15"
                                                           data-date-format="dd-mm-yyyy"
                                                           value="${flash.projectDeliverDate == null ? project?.projectDeliverDate?.toDate()?.format("dd-MM-yyyy"): flash.projectDeliverDate}">
                                                    <div class="input-group-addon">
                                                        <i class="fa fa-calendar"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-row">
                                            <div class="col-md-6 col-lg-4 mb-3">
                                                <label for="validationServer03">Πελάτης</label>
                                                <div class="controls">
                                                    <select id="customer" name="customerId"
                                                            class="form-control input-lg">
                                                        #{list customers}
                                                            <option value='${_.id}' ${project?.customer?.id==_.id?"selected='selected'":""}>${_.financialInfo?.fullName}</option>
                                                        #{/list}
                                                    </select>
                                                </div>
                                            </div>
                                        #{if _USER.roleInfo?.roleName.equals("root") || _USER.roleInfo?.roleName.equals("admin") }
                                            <div class="col-md-6 col-lg-2 mb-3">
                                                <label for="validationServer07">Κόστος</label>
                                                <input type="text" class="form-control moneyC" name="cost"
                                                       id="validationServer07"
                                                       value="${flash.cost == null ? project?.financialInfo?.cost : flash.cost}">
                                            </div>

                                            <div class="col-md-2 col-lg-2 mb-3">
                                                <label for="validationServer08">Προκαταβολή</label>
                                                <input type="text" class="form-control" name="downpayment"
                                                       id="validationServer08"
                                                       value="${flash.downpayment == null ? project?.financialInfo?.downpayment : flash.downpayment}">
                                            </div>
                                        #{/if}
                                        </div>
                                        <div class="form-row">
                                            <div class="col-md-8 mb-3">
                                                <label for="validationServer02">Περιγραφή Έργου</label>
                                                <textarea type="text" class="form-control" name="description" rows="4"
                                                          id="description"
                                                >${flash.description == null ? project?.description : flash.description}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel-footer">
                                <div class="form-inline">
                                    <div class="col-1">
                                        <a href="/filterProjects" class="btn btn-grey">Επιστροφή
                                        </a>
                                    </div>
                                    <div class="col-1">
                                        #{if !_USER.roleInfo?.roleName.equals("viewer")}
                                            <button id="btnSubmit" type="submit" class="btn btn-success">
                                                #{if project?.id == null} Εισαγωγή #{/if} #{else} Ενημέρωση  #{/else}
                                            </button>
                                        #{/if}
                                    </div>
                                </div>
                            </div>
                            <!-- end panel-body -->
                        </div>
                    </div>
                </div>
            #{/form}
            </div>
            <div class="tab-pane fade" id="document">
                <div class="row">
                    <div class="col">
                        <div class="panel panel-inverse">
                            <!-- begin panel-heading -->
                            <div class="panel-heading">
                                <h4 class="panel-title">Διαχείριση εγγράφων</h4>
                            </div>
                            <div class="panel-body">
                            #{if !_USER.roleInfo?.roleName.equals("viewer")}
                                <button id="showPersonForm"
                                        class="btn btn-sm btn-primary"
                                        data-toggle="modal"
                                        data-target="#addFileModal">Εισαγωγή εγγράφου
                                </button>
                            #{/if}

                                <div id="listDocuments" class="p-t-20"></div>
                            </div>
                            <div class="panel-footer">
                            </div>

                    </div>
                </div>
                </div>
            </div>
            <div class="tab-pane fade" id="deliverable">
            #{if !_USER.roleInfo?.roleName.equals("viewer")}
                <button id="showAddDeliverableForm"
                        class="btn btn-sm btn-primary"
                        data-toggle="modal"
                        data-target="#addDeliverableModal">Εισαγωγή παραδοτέου
                </button>
            #{/if}

                <div id="listProjectDeliverables" class="p-t-10"></div>
            </div>
            <div class="tab-pane fade" id="review">
            #{if !_USER.roleInfo?.roleName.equals("viewer")}
                <button id="showPersonForm"
                        class="btn btn-sm btn-primary"
                        data-toggle="modal"
                        data-target="#addFileModal">Εισαγωγή αρχείου
                </button>
            #{/if}
                <div id="listProjectImages" class="p-t-20"></div>
            </div>
        #{if !_USER.roleInfo?.roleName.equals("viewer")}
            <div class="tab-pane fade" id="associates">
                <div id="listPersonsCard"></div>
            </div>
        #{/if}
        </div>
        <!-- end tab-content -->
    </div>
</div>


<div id="addFileModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Εισαγωγή αρχείων</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">
                <form id="fileupload" action="@{Projects.doUpload()}" method="POST" enctype="multipart/form-data"
                      class="">
                    <input type="hidden" name="project_id" value="${project?.id}">
                    <input type="hidden" name="lead_id" value="">
                    <input type="hidden" name="customer_id" value="">
                    <!-- begin panel -->
                    <div class="panel panel-inverse">
                        <!-- begin panel-body -->
                        <div class="panel-body">
                            <div class="row">
                                <label for="fileTitle">Τίτλος αρχείου</label>
                                <input type="text" name="title" id="fileTitle" class="form-control">
                                <label for="fileTitle" class="p-t-3">Παραδοτέο</label>
                                <select id="deliverable_id" name="deliverable_id" class="form-control input-lg">
                                    <option value="0">επιλογή παραδοτέου</option>
                                #{list dels}
                                    <option value='${_.id}'>${_.description}</option>
                                #{/list}
                                </select>

                                <div class="checkbox checkbox-css p-t-10">
                                    <input type="checkbox" id="isImage" name="isImage" class="form-control">
                                    <label for="isImage">Αρχείο γραφικού;</label>
                                </div>
                                <!-- The global file processing state -->
                                <span class="fileupload-process"></span>

                            </div>
                            <div class="row p-t-20" style="margin-left: -20px">
                                <div class="col-md-7 p-t-5">
								<span class="btn btn-default fileinput-button m-r-10">
									<i class="fa fa-plus"></i>
									<span>Add files...</span>
									<input type="file" name="files[]" multiple="">
								</span>
                                </div>
                            </div>
                        </div>
                        <!-- end panel-body -->
                    </div>
                    <div id="progress">
                        <div class="bar" style="width: 0%;"></div>
                    </div>
                    <!-- end panel -->
                </form>
            </div>
            <div class="modal-footer">
                <a href="javascript:;" class="btn btn-white" data-dismiss="modal">Επιστροφή</a>
                <button type="button" id="addFile" class="btn btn-success"
                        onclick='document.getElementById("fileupload").submit()'>Ενημέρωση
                </button>
            </div>
        </div>
    </div>
</div>

<!-- DELIVERABLE FORM -->
<div id="addDeliverableModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Φόρμα παραδοτέου</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">
                <div id="alertPersonError" class="alert alert-danger " style="display:none;">
                    <h6><i class="fa fa-info-circle"></i> Παρακαλώ συμπληρώστε τα υποχρεωτικά πεδία</h6>
                </div>
                <div class="form-row">
                    <input type="text" id="deliverableId" style="display: none;"/>
                    <div class="col-md-6">
                        <label>Τίτλος</label>
                        <input type="text" class="form-control" name="pdescription" id="pdescription">
                    </div>
                    <div class="col-md-3">
                        <label for="validationServer03">Κατάσταση</label>
                        <select id="pstatus" name="pstatus"
                                class="form-control input-md">
                            <option value='0'>
                                Ανοικτό
                            </option>
                            <option value='1'>
                                Κλειστό
                            </option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="validationServer15"> Ημ. Παράδοσης</label>
                        <div class="input-group date" id="pendDate1">
                            <input type="text" name="pendDate" class="form-control"
                                   id="pendDate"
                                   data-date-format="dd-mm-yyyy"
                                   value="">
                            <div class="input-group-addon">
                                <i class="fa fa-calendar"></i>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="form-row">
                    <div class="col-md-12">
                        <label>Περιγραφή</label>
                        <textarea type="text" class="form-control" name="pdeliverableInfo" rows="4"
                                  id="pdeliverableInfo"></textarea>
                    </div>

                </div>

            </div>
            <div class="modal-footer">
                <a href="javascript:;" class="btn btn-white" data-dismiss="modal">Επιστροφή</a>
                <button type="button" id="deleteDeliverable" class="btn btn-white">Διαγραφή</button>
                <button type="button" id="addDeliverable" class="btn btn-white">Ενημέρωση</button>
            </div>
        </div>
    </div>
</div>

<style>
    .panel-body {
        overflow-y: auto;
        height: 380px;
    }
</style>

<script>
    jQuery(function ($) {


        var formatOptions = {decimalSymbol: '.', digitGroupSymbol: ',', symbol: '€', positiveFormat: '%s %n'};

        $(".moneyC").formatCurrency(formatOptions);

        var listAction = #{jsAction @controllers.Contacts.listPersonsCard(null,project?.id)/}
                $("#listPersonsCard").load(listAction(), function () {
                    $("#listPersonsCard").show();

                })

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

                })

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

                })

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

                })

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


    });
</script>

<script>
    $("#addDeliverable").click(function (e) {
        e.stopPropagation();
        addDeliverable();
        return false;
    })

    var addDeliverable = function () {

        var pid =${project?project?.id:"'0'"}

                $.ajax({
                    url: "@{Projects.doAddDeliverable}",
                    data: {
                        projectId: pid,
                        deliverableId: $("#deliverableId").val(),
                        description: $("#pdescription").val(),
                        deliverableInfo: $("textarea#pdeliverableInfo").val(),
                        endDateStr: $("#pendDate").val(),
                        status: $("#pstatus").val()
                    },
                    type: 'POST',
                    success: function () {
                        $("#addDeliverableModal").modal('hide');
                        var listAction = #{jsAction @controllers.Contacts.listPersonsCard(null,project?.id)/}
                                $("#listPersonsCard").load(listAction(), function () {
                                    $("#listPersonsCard").show();

                                })

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

                                })

                        var last_gritter;
                        if (last_gritter) $.gritter.remove(last_gritter);
                        last_gritter = $.gritter.add({
                            title: 'Αποθήκευση',
                            text: 'Η εγγραφή αποθηκεύτηκε επιτυχώς',
                            class_name: 'gritter-success gritter-left'
                        });
                    }


                });

        return false;
    }

</script>

<script>
    $("#deleteDeliverable").click(function (e) {
        e.stopPropagation();
        deleteDeliverable();
        return false;
    })

    var deleteDeliverable = function () {
        $.ajax({
            url: "@{Projects.deleteDeliverable}",
            data: {
                deliverableId: $("#deliverableId").val()
            },
            type: 'POST',
            success: function () {
                $("#addDeliverableModal").modal('hide');
                var listDocAction = #{jsAction @controllers.Projects.listProjectDeliverables(project?.id)/}
                        $("#listProjectDeliverables").load(listDocAction(), function () {
                            $("#listProjectDeliverables").show();

                        })

                var last_gritter;
                if (last_gritter) $.gritter.remove(last_gritter);
                last_gritter = $.gritter.add({
                    title: 'Διαγραφή',
                    text: 'Η εγγραφή διαγράφτηκε επιτυχώς',
                    class_name: 'gritter-success gritter-left'
                });
            }


        });

        return false;
    }
</script>