Subversion Repositories SmartDukaan

<script type="text/javascript">
    $('input[name="extendSchemeById"]').daterangepicker($.extend(getSingleDatePicker(), {
        "drops": "up",
    }));
    $('input[name="expireSchemeById"]').daterangepicker($.extend(getSingleDatePicker(moment("$scheme.getEndDateTime()")), {
        "drops": "up",
    }));

    $(document).off('click.addScheme').on('click.addScheme', ".add-scheme", function () {
        $("#newItemToSchemeModal").modal({backdrop: true, show: true});
    });
    $(document).off('hidden.bs.modal.addScheme').on('hidden.bs.modal.addScheme', '#newItemToSchemeModal', function () {
        $("#addSchemeForm").trigger("reset");
    });

    // Edit scheme item date window
    $(document).on('click', '.edit-item-dates', function () {
        var row = $(this).closest('tr');
        row.find('.date-display').hide();
        row.find('.date-edit').show();
        row.find('.edit-item-dates').hide();
        row.find('.save-item-dates, .cancel-item-dates').show();

        // Initialize daterangepicker on the inline inputs
        var startInput = row.find('.edit-start-date');
        var endInput = row.find('.edit-end-date');
        if (!startInput.data('daterangepicker')) {
            var startVal = startInput.val() ? moment(startInput.val(), 'DD/MM/YYYY') : moment("$scheme.getStartDateTime()");
            var endVal = endInput.val() ? moment(endInput.val(), 'DD/MM/YYYY') : moment("$scheme.getEndDateTime()");
            startInput.daterangepicker($.extend(getSingleDatePicker(startVal), {"drops": "down"}));
            endInput.daterangepicker($.extend(getSingleDatePicker(endVal), {"drops": "down"}));
        }
    });

    $(document).on('click', '.cancel-item-dates', function () {
        var row = $(this).closest('tr');
        row.find('.date-display').show();
        row.find('.date-edit').hide();
        row.find('.edit-item-dates').show();
        row.find('.save-item-dates, .cancel-item-dates').hide();
    });

    // Convert DD/MM/YYYY to ISO LocalDateTime format for the server
    function toIsoDateTime(ddmmyyyy, endOfDay) {
        var parts = ddmmyyyy.split('/');
        if (parts.length !== 3) return ddmmyyyy;
        var isoDate = parts[2] + '-' + parts[1] + '-' + parts[0];
        return isoDate + (endOfDay ? 'T23:59:59' : 'T00:00:00');
    }

    $(document).on('click', '.save-item-dates', function () {
        var row = $(this).closest('tr');
        var itemId = row.data('schemeitemid');
        var startDate = row.find('.edit-start-date').val();
        var endDate = row.find('.edit-end-date').val();
        if (!startDate || !endDate) {
            alert('Both start date and end date are required');
            return;
        }
        var isoStart = toIsoDateTime(startDate, false);
        var isoEnd = toIsoDateTime(endDate, true);
        doPutAjaxRequestHandler('/scheme/item/window?schemeItemId=' + itemId
            + '&startDate=' + encodeURIComponent(isoStart)
            + '&endDate=' + encodeURIComponent(isoEnd),
            function (response) {
                loadSchemeDetails($scheme.getId(), "scheme-details-container");
            });
    });

    // Modal: category -> brand -> model cascade
    $('#newItemToSchemeModal').on('shown.bs.modal', function () {
        $('input[name="addItemStartDate"]').daterangepicker($.extend(getSingleDatePicker(moment("$scheme.getStartDateTime()")), {
            "drops": "down",
        }));
        $('input[name="addItemEndDate"]').daterangepicker($.extend(getSingleDatePicker(moment("$scheme.getEndDateTime()")), {
            "drops": "down",
        }));

        // Load brands for default category
        var catId = $('#modal-category-list').val();
        if (catId) loadModalBrands(catId);
    });

    $('#modal-category-list').on('change', function () {
        var catId = $(this).val();
        if (catId) loadModalBrands(catId);
    });

    function loadModalBrands(categoryId) {
        doGetAjaxRequestHandler(context + '/getBrandsByCategory?categoryId=' + categoryId, function (response) {
            $('#modal-brand-list').html(response);
            // Re-id the select so it doesn't clash with create-scheme page
            $('#modal-brand-list select').attr('id', 'modal-tag-listing-brands');
            $('#modal-tag-listing-brands').multiselect({
                includeSelectAllOption: true,
                multiple: true,
                maxHeight: 200,
                buttonWidth: '180px',
                numberDisplayed: 1,
                nonSelectedText: 'Brands',
                nSelectedText: ' - Brands Selected',
                allSelectedText: 'All Brands',
                enableFiltering: true,
                enableCaseInsensitiveFiltering: true
            });
            $('#modal-tag-listing-brands').on('change', function () {
                var brands = $(this).val();
                if (brands) loadModalModels(categoryId, brands);
            });
        });
    }

    function loadModalModels(categoryId, brands) {
        var brandsString = brands.join(',');
        doGetAjaxRequestHandler(context + '/getCatalogDescriptionByBrands?categoryId=' + categoryId + '&brands=' + brandsString, function (response) {
            $('#modal-models-list').html(response);
            $('#modal-models-list select').addClass('modalCatalogItems');
            $('.modalCatalogItems').multiselect({
                includeSelectAllOption: true,
                maxHeight: 200,
                buttonWidth: '220px',
                numberDisplayed: 1,
                nonSelectedText: 'Models',
                nSelectedText: ' - Models Selected',
                allSelectedText: 'All Models',
                enableFiltering: true,
                enableCaseInsensitiveFiltering: true
            });
        });
    }
</script>
<h3 style="padding-left:3%;padding-top:2%;font-weight:bold;">Scheme Id : $scheme.getId()</h3>
<h5 style="padding-left:3%;font-weight:normal;">Reference : #if($scheme.getReference())$scheme.getReference()#else-#end</h5>

<div class="row" style="padding-left:3%;">
    <div class="col-lg-12">
        <table>
            <tr>
                <td>
                    #if($scheme.getActiveTimestamp())
                        <span>Activated On : $scheme.getFormattedActiveTimestamp()</span>
                        <p></p>
                    #end
                    #if($scheme.getExpireTimestamp())
                        <span>Expired On : $scheme.getFormattedExpireTimestamp()</span>
                        <p></p>
                    #end
                </td>
                #if($isAdmin && $fullAccess)
                    <td>
                        <button class="btn btn-sm btn-primary add-scheme" data="$scheme.getId()"
                                style="width:100%;background-color:#007aff;color:white;padding-right: 10px">Add Item
                        </button>
                    </td>
                #end
            <tr>
        </table>
        <table class="table table-striped table-advance table-hover">
            <tbody>
            <tr>
                <th>Model ID</th>
                <th>Model Name</th>
                <th>Start Date</th>
                <th>End Date</th>
                <th>Updated By</th>
                <th>Updated On</th>
                #if($isAdmin && $fullAccess)
                    <th>Action</th>
                #end
            </tr>
                #if($schemeItems && $schemeItems.size()>0)
                    #foreach( $item in $schemeItems)
                    <tr data-schemeitemid="$item.getId()" data-catalogid="$item.getCatalogId()">
                        <td>$item.getCatalogId()</td>
                        <td>#if($scheme.getCatalogStringMap().containsKey($item.getCatalogId()))$scheme.getCatalogStringMap().get($item.getCatalogId())#else-#end</td>
                        <td>
                            <span class="date-display">#if($item.getStartDate())$dateFormatter.format($item.getStartDate())#else-#end</span>
                            <input type="text" class="form-control date-edit edit-start-date" style="display:none; width:160px" value="#if($item.getStartDate())$dateFormatter.format($item.getStartDate())#end">
                        </td>
                        <td>
                            <span class="date-display">#if($item.getEndDate())$dateFormatter.format($item.getEndDate())#else-#end</span>
                            <input type="text" class="form-control date-edit edit-end-date" style="display:none; width:160px" value="#if($item.getEndDate())$dateFormatter.format($item.getEndDate())#end">
                        </td>
                        <td>#if($item.getUpdatedBy())$item.getUpdatedBy()#else-#end</td>
                        <td>#if($item.getUpdatedOn())$dateTimeFormatter.format($item.getUpdatedOn())#else-#end</td>
                        #if($isAdmin && $fullAccess)
                        <td>
                            <button class="btn btn-xs btn-info edit-item-dates">Edit</button>
                            <button class="btn btn-xs btn-success save-item-dates" style="display:none">Save</button>
                            <button class="btn btn-xs btn-default cancel-item-dates" style="display:none">Cancel</button>
                            <button class="btn btn-xs btn-danger delete-schemes" data-schemeid="$scheme.getId()"
                                    data-catalogid="$item.getCatalogId()">Delete</button>
                        </td>
                        #end
                    </tr>
                    #end
                #elseif($scheme.getCatalogStringMap().size()>0)
                    #foreach( $catalogIdDescriptionEntry in $scheme.getCatalogStringMap().entrySet())
                    <tr data-catalogid="$catalogIdDescriptionEntry.getKey()">
                        <td>$catalogIdDescriptionEntry.getKey()</td>
                        <td>$catalogIdDescriptionEntry.getValue()</td>
                        <td colspan="4">-</td>
                        #if($isAdmin && $fullAccess)
                        <td>
                            <button class="btn btn-primary delete-schemes" data-schemeid="$scheme.getId()"
                                    data-catalogid="$catalogIdDescriptionEntry.getKey()">Delete
                            </button>
                        #end
                    </tr>
                    #end
                #else
                <tr>
                    <td colspan="12" style="text-align:center;">NO ITEM FOUND FOR SCHEME</td>
                </tr>
                #end
            </tbody>
        </table>
        <p></p>
        #if($isAdmin && $fullAccess)
            <span>Created By : $scheme.getCreatedBy()</span>
            <p></p>
            #if((!$scheme.getActiveTimestamp()) && (!$scheme.getExpireTimestamp()))
                <div class="btn-group" style="width:40%">
                    <button class="btn active-scheme" data="$scheme.getId()"
                            style="width:100%;background-color:#e98c8f;color:white;">Active
                    </button>
                </div>
            #else
                #if(($scheme.getActiveTimestamp()) && (!$scheme.getExpireTimestamp()))
                    <table>
                        <td>
                            <div class="scheme-extend">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="input-group" style="width:80%">
                                            <input type="hidden" value="$scheme.getId()" id="schemeId">
                                            <input placeholder="Extend Date Time" id="extendSchemeById" type="text"
                                                   class="form-control" name="extendSchemeById">
                                            <span class="input-group-btn"> <button
                                                    class="btn btn-primary extendSchemeById"
                                                    id="extendScheme-button"
                                                    type="button">Extend</button></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="input-group" style="width:80%">
                                <input type="hidden" value="$scheme.getId()" id="schemeId">
                                <input placeholder="Expire Time" type="text"
                                       class="form-control expireTime" id="exprireScheme" name="expireSchemeById">
                                <span class="input-group-btn">
                                                                <button class="btn btn-primary expire-scheme" data="$scheme.getId()">Expire</button>
                                                        </span>
                            </div>
                        </td>
                    </table>
                    <br><br>
                #end
            #end
        #end
    </div>
    <div id="newItemToSchemeModal" class="modal fade" role="dialog" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title"><b>Add Item To Scheme (ID: $scheme.getId())</b></h4>
                </div>
                <div class="modal-body">
                    <form id="addSchemeForm">
                        <input type="hidden" value="$scheme.getId()" id="schemeids">
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label><b>Category</b> <span style="color:red">*</span></label>
                                    <select class="form-control input-sm" id="modal-category-list">
                                        #foreach($category in $categories)
                                            <option value="$category.getId()">$category.getLabel()</option>
                                        #end
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label><b>Brands</b> <span style="color:red">*</span></label>
                                    <div id="modal-brand-list"></div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label><b>Models</b> <span style="color:red">*</span></label>
                                    <div id="modal-models-list">
                                        <select class="form-control modalCatalogItems" multiple="multiple"></select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label><b>Start Date</b> <small>(optional, defaults to scheme start: $dateFormatter.format($scheme.getStartDateTime()))</small></label>
                                    <input type="text" class="form-control" id="addItemStartDate" name="addItemStartDate" placeholder="dd/mm/yyyy"/>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label><b>End Date</b> <small>(optional, defaults to scheme end: $dateFormatter.format($scheme.getEndDateTime()))</small></label>
                                    <input type="text" class="form-control" id="addItemEndDate" name="addItemEndDate" placeholder="dd/mm/yyyy"/>
                                </div>
                            </div>
                        </div>
                        <div class="alert alert-info" style="margin-top:5px; padding:8px;">
                            Item dates must be within scheme window: <b>$dateFormatter.format($scheme.getStartDateTime())</b> to <b>$dateFormatter.format($scheme.getEndDateTime())</b>.
                            Non-overlapping windows are enforced per model within this scheme.
                        </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 add-item">Add Item</button>
                </div>
            </div>
        </div>
    </div>
</div>