Subversion Repositories SmartDukaan

<style>
    .table-striped > tbody > tr:nth-child(odd) > td {
        background: white;
        background-color: white;
        font-size: 14px;
    }

    .table-striped > tbody > tr:nth-child(even) > td {
        background: white;
        background-color: white;
    }

    .btn:hover,
    .btn:focus {
        color: grey;
        text-decoration: none;
    }

    #contactUsModal.in {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    #contactUsModal .modal-dialog.modal-lg {
        width: 80%;
        margin: 0;
        left: auto;
        right: auto;
    }

    .modal-content {
        background: white;
    }

    .modelHeaderCustom {
        font-size: 14px;
        font-weight: bold;
    }

    hr {
        background-color: #007aff;
        border: none;
        height: 1px;
        background: #007aff;
    }

    .border-highlight {
        border: 3px solid red;
    }

    #contact-us-table .contact-action-btn {
        margin: 0 2px;
        padding: 2px 8px;
    }
</style>
<section class="wrapper">
    <!--overview start-->
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header">
                <i class="icon_document_alt"></i>#springMessage("support.contactdetails")
            </h3>
            <ol class="breadcrumb">
                <li>
                    <i class="fa fa-home"></i>
                    <a href="${rc.contextPath}/dashboard">#springMessage("support.home")</a>
                </li>
                <li>
                    <i class="icon_document_alt"></i>#springMessage("support.contactdetails")
                </li>
            </ol>
        </div>
    </div>
    <div id="contact-us-table">
        <div class="row">

            <div class="col-lg-9">
                #if($contactUsEditor)
                    <div style="margin-bottom: 10px;">
                        <button type="button" class="btn btn-primary contact-add-btn" data-section="MAIN">
                            <i class="fa fa-plus"></i> Add Contact
                        </button>
                    </div>
                #end
                <table class="table table-bordered">
                    <tbody>
                    <tr>
                        <th>#springMessage("support.area")</th>
                        <th>#springMessage("support.basearea")</th>
                        <th>#springMessage("support.name")</th>
                        <th>#springMessage("support.designation")</th>
                        <th>#springMessage("support.mobile")</th>
                        <th>#springMessage("support.email")</th>
                        #if($contactUsEditor)<th>Action</th>#end
                    </tr>

                    #foreach($contact in $mainContacts)
                        <tr data-cu-id="$!{contact.id}" data-cu-name="$!{contact.name}" data-cu-section="$!{contact.section}">
                            <td>$!{contact.area}</td>
                            <td>$!{contact.baseArea}</td>
                            <td>$!{contact.name}</td>
                            <td>$!{contact.designation}</td>
                            <td>$!{contact.mobile}</td>
                            <td>
                                <a href="mailto:$!{contact.email}">$!{contact.email}</a>
                            </td>
                            #if($contactUsEditor)
                                <td style="white-space: nowrap;">
                                    <button type="button" class="btn btn-xs btn-default contact-action-btn contact-up-btn"
                                            data-id="$!{contact.id}" title="Move up"><i class="fa fa-arrow-up"></i></button>
                                    <button type="button" class="btn btn-xs btn-default contact-action-btn contact-down-btn"
                                            data-id="$!{contact.id}" title="Move down"><i class="fa fa-arrow-down"></i></button>
                                    <button type="button" class="btn btn-xs btn-info contact-action-btn contact-edit-btn"
                                            data-id="$!{contact.id}" data-section="$!{contact.section}"
                                            data-area="$!{contact.area}" data-basearea="$!{contact.baseArea}"
                                            data-name="$!{contact.name}" data-designation="$!{contact.designation}"
                                            data-mobile="$!{contact.mobile}" data-email="$!{contact.email}">
                                        <i class="fa fa-pencil"></i> Edit
                                    </button>
                                    <button type="button" class="btn btn-xs btn-danger contact-action-btn contact-delete-btn"
                                            data-id="$!{contact.id}" data-name="$!{contact.name}">
                                        <i class="fa fa-trash"></i> Delete
                                    </button>
                                </td>
                            #end
                        </tr>
                    #end

                    <tr>
                        <td colspan="#if($contactUsEditor)7#{else}6#end" align="center">
                            <b>Escalations</b>
                            #if($contactUsEditor)
                                <button type="button" class="btn btn-primary btn-xs contact-add-btn"
                                        data-section="ESCALATION" style="margin-left: 10px;">
                                    <i class="fa fa-plus"></i> Add Escalation
                                </button>
                            #end
                        </td>
                    </tr>
                    <tr>
                        <td>Area</td>
                        <td>Region</td>
                        <th>Name</th>
                        <th>Designation</th>
                        <th>Mobile</th>
                        <th>Email</th>
                        #if($contactUsEditor)<th>Action</th>#end
                    </tr>
                    #foreach($contact in $escalationContacts)
                        <tr data-cu-id="$!{contact.id}" data-cu-name="$!{contact.name}" data-cu-section="$!{contact.section}">
                            <td>$!{contact.area}</td>
                            <td>$!{contact.baseArea}</td>
                            <td>$!{contact.name}</td>
                            <td>$!{contact.designation}</td>
                            <td>$!{contact.mobile}</td>
                            <td>
                                <a href="mailto:$!{contact.email}">$!{contact.email}</a>
                            </td>
                            #if($contactUsEditor)
                                <td style="white-space: nowrap;">
                                    <button type="button" class="btn btn-xs btn-default contact-action-btn contact-up-btn"
                                            data-id="$!{contact.id}" title="Move up"><i class="fa fa-arrow-up"></i></button>
                                    <button type="button" class="btn btn-xs btn-default contact-action-btn contact-down-btn"
                                            data-id="$!{contact.id}" title="Move down"><i class="fa fa-arrow-down"></i></button>
                                    <button type="button" class="btn btn-xs btn-info contact-action-btn contact-edit-btn"
                                            data-id="$!{contact.id}" data-section="$!{contact.section}"
                                            data-area="$!{contact.area}" data-basearea="$!{contact.baseArea}"
                                            data-name="$!{contact.name}" data-designation="$!{contact.designation}"
                                            data-mobile="$!{contact.mobile}" data-email="$!{contact.email}">
                                        <i class="fa fa-pencil"></i> Edit
                                    </button>
                                    <button type="button" class="btn btn-xs btn-danger contact-action-btn contact-delete-btn"
                                            data-id="$!{contact.id}" data-name="$!{contact.name}">
                                        <i class="fa fa-trash"></i> Delete
                                    </button>
                                </td>
                            #end
                        </tr>
                    #end

                    </tbody>
                </table>
            </div>
        </div>
    </div>

    #if($contactUsEditor)
        <!-- Add / Edit contact modal -->
        <div class="modal fade" id="contactUsModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title modelHeaderCustom" id="contactUsModalTitle">Add Contact</h4>
                    </div>
                    <div class="modal-body">
                        <form id="contactUsForm" onsubmit="return false;">
                            <input type="hidden" id="cuId" name="id" value="0"/>
                            <input type="hidden" id="cuSection" name="section" value="MAIN"/>
                            <div class="form-group">
                                <label>Area</label>
                                <input type="text" class="form-control" id="cuArea" name="area"/>
                            </div>
                            <div class="form-group">
                                <label id="cuBaseAreaLabel">Base Area</label>
                                <input type="text" class="form-control" id="cuBaseArea" name="baseArea"/>
                            </div>
                            <div class="form-group">
                                <label>Name <span style="color:red;">*</span></label>
                                <input type="text" class="form-control" id="cuName" name="name"/>
                            </div>
                            <div class="form-group">
                                <label>Designation</label>
                                <input type="text" class="form-control" id="cuDesignation" name="designation"/>
                            </div>
                            <div class="form-group">
                                <label>Mobile No</label>
                                <input type="text" class="form-control" id="cuMobile" name="mobile"/>
                            </div>
                            <div class="form-group">
                                <label>Email Id</label>
                                <input type="text" class="form-control" id="cuEmail" name="email"/>
                            </div>
                            <div class="form-group" id="cuPositionGroup">
                                <label>Position in list</label>
                                <select class="form-control" id="cuPosition"></select>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-primary" id="contactUsSaveBtn">Save</button>
                    </div>
                </div>
            </div>
        </div>
    #end
</section>