Subversion Repositories SmartDukaan

Rev

Rev 34691 | Blame | Compare with Previous | Last modification | View Log | RSS feed 

<style>
.grab {
        cursor: grab;
}

.grabbed {
        box-shadow: 0 0 13px #000;
}

.grabCursor, .grabCursor * {
        cursor: grabbing !important;
}

/* ───── Pine Labs-style EMI preview ───── */
.pl-wrap {
    margin-top: 14px;
}

.pl-product {
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    margin: 10px 0 18px 0;
    background: #fff;
    overflow: hidden;
}

.pl-product-head {
    padding: 12px 14px;
    border-bottom: 1px solid #eee;
    background: linear-gradient(180deg, #fafafa, #f1f1f1);
}

.pl-product-title {
    font-size: 15px;
    font-weight: 700;
    color: #222;
}

.pl-product-meta {
    font-size: 12px;
    color: #666;
    margin-top: 2px;
}

.pl-product-meta .pl-price {
    color: #1b5e20;
    font-weight: 700;
    margin-left: 8px;
}

.pl-tabs {
    margin: 0 10px;
    border-bottom: 2px solid #2E7D32;
}

.pl-tabs > li > a {
    border: none;
    color: #555;
    padding: 8px 14px;
    border-radius: 0;
}

.pl-tabs > li.active > a,
.pl-tabs > li.active > a:hover,
.pl-tabs > li.active > a:focus {
    color: #2E7D32;
    border: none;
    border-bottom: 3px solid #2E7D32;
    background: transparent;
    font-weight: 700;
}

.pl-tabs .badge {
    background: #ccc;
    color: #fff;
    margin-left: 4px;
}

.pl-tabs > li.active .badge {
    background: #2E7D32;
}

.pl-tab-content {
    padding: 10px 14px 14px 14px;
}

.pl-bank {
    border: 1px solid #e3e3e3;
    border-radius: 5px;
    margin: 8px 0;
    background: #fff;
}

.pl-bank-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    user-select: none;
}

.pl-bank-head:hover {
    background: #fafafa;
}

.pl-bank-caret {
    width: 14px;
    color: #666;
}

.pl-bank-name {
    font-weight: 600;
    color: #222;
    min-width: 180px;
}

.pl-bank-badges {
    flex: 0 0 auto;
}

.pl-bank-sub {
    margin-left: auto;
    color: #777;
    font-size: 12px;
}

.pl-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-right: 4px;
    border: 1px solid transparent;
    text-transform: uppercase;
}

.pl-badge.nocost {
    color: #1b5e20;
    background: #e8f5e9;
    border-color: #c8e6c9;
}

.pl-badge.lowcost {
    color: #e65100;
    background: #fff3e0;
    border-color: #ffe0b2;
}

.pl-badge.other {
    color: #444;
    background: #f0f0f0;
    border-color: #ddd;
}

.pl-bank-body {
    padding: 2px 12px 10px 34px;
    border-top: 1px dashed #eee;
}

.pl-plan {
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    padding: 8px 12px;
    margin: 8px 0;
    background: #fafafa;
}

.pl-plan-main {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.pl-plan-emi {
    font-weight: 700;
    color: #222;
}

.pl-plan-x {
    color: #999;
}

.pl-plan-tenure {
    color: #333;
}

.pl-plan-sub {
    font-size: 11px;
    color: #666;
    margin-top: 3px;
    font-family: Menlo, Consolas, monospace;
}

.pl-empty {
    color: #999;
    font-style: italic;
    padding: 6px 0;
}
</style>

<script type="text/javascript">
        $(function () {
                $('input[name="offerdateRange"]').daterangepicker(getRangedDatePicker());
        $('input[name="emiImportDateRange"]').daterangepicker(getRangedDatePicker());
        });

        $(".edit-web-listing").click(function () {
                $("#web-editable-container").modal({
                        backdrop: false
                });

        });
</script>

<section class="wrapper">
        <div class="row">
                <div class="col-lg-12">
                        <h3 class="page-header">
                                <i class="icon_document_alt"></i>Web Offers
                        </h3>
                        <ol class="breadcrumb">
                                <li><i class="fa fa-home"></i><a
                                        href="${rc.contextPath}/dashboard">Home</a></li>
                                <li><i class="icon_document_alt"></i>Web Offers</li>
                        </ol>
                </div>
        </div>
        <div class="col-lg-6">
                <div class="row">
                        <form onsubmit="event.preventDefault();addWebOffer();">
                                <div class="col-lg-4">
                                        <div class="form-group">
                                                <label for="web-listing-title">Title</label> <input type="text"
                                                        class="form-control" id="web-offer-title"
                                                        placeholder="Hdfc Bank Offer">
                                        </div>
                                        <div class="form-group">
                                                <label for="web-listing-title">Small Text</label> 
                                                 <input type="text"
                                                        class="form-control" id="small-text"
                                                        placeholder="Small Text"/>
                                        </div>
                                </div>
                                <div class="col-lg-4">
                                        <div class="form-group">
                                                <label for="web-listing-title">Detailed Text</label>
                                                        <textarea
                                                        class="form-control" id="detailed-text"
                                                        ></textarea>
                                        </div>
                                        <div class="form-group" style="margin-top: 15px">
                                                <div class="form-group">
                                                        <label for="web-listing-bannerurl">Banner Url</label> <input
                                                                class="form-control" id="offer-banner-large"
                                                                placeholder="Banner Url">
                                                </div>
                                        </div>
                                </div>
                                <div class="col-lg-4">
                                        <div class="form-group">
                                                <label for="schemeDuration">Offer Duration :</label> 
                                                <input id="offerDuration" name="offerdateRange" type="text" value="" class="form-control input-sm">
                                        </div>
                                        <div class="form-group">
                                        <label></label> 
                                        <button type="submit" class="btn btn-default">Add Offer</button>
                                        </div>
                                </div>                          
                        </form>
                </div>

        <div class="row" style="margin-top:15px; padding:10px; border:1px dashed #999; background:#fafafa;">
            <div class="col-lg-12">
                <h4 style="margin:0 0 10px 0;">Import from EMI JSON</h4>
                <form id="emi-import-form" onsubmit="event.preventDefault(); importEmiJson();"
                      enctype="multipart/form-data">
                    <div class="col-lg-4">
                        <label for="emi-import-file">JSON file</label>
                        <input type="file" id="emi-import-file" accept="application/json,.json" class="form-control"
                               required>
                    </div>
                    <div class="col-lg-3">
                        <label for="emi-import-range">Offer Duration</label>
                        <input id="emi-import-range" name="emiImportDateRange" type="text" value=""
                               class="form-control input-sm">
                    </div>
                    <div class="col-lg-2">
                        <label>&nbsp;</label>
                        <div class="checkbox"><label><input type="checkbox" id="emi-import-dryrun" checked> Dry
                            run</label></div>
                    </div>
                    <div class="col-lg-3">
                        <label>&nbsp;</label>
                        <button type="submit" class="btn btn-primary" id="emi-import-btn">Import</button>
                    </div>
                </form>
                <div class="col-lg-12" id="emi-import-result" style="margin-top:10px;"></div>
            </div>
        </div>

        <div class="row" style="margin-top:12px; margin-bottom:4px;">
            <div class="col-lg-5">
                <label for="offer-active-on" style="margin-right:8px;">Show offers active on:</label>
                <input id="offer-active-on" type="text" class="form-control input-sm"
                       style="display:inline-block; width:150px;" placeholder="DD/MM/YYYY" autocomplete="off">
                <a href="#" id="offer-active-on-clear" style="margin-left:8px;">Clear</a>
                <span id="offer-active-on-note" style="margin-left:12px; color:#666; font-size:12px;"></span>
            </div>
        </div>

                <div class="row">
                        <table class="table table-border table-condensed table-bordered"
                                id="catalog-feature-table">
                                <thead>
                                        <tr>
                                                <th>Id</th>
                                                <th>Title</th>
                                                <th>Banner Url</th>
                        <th>Start</th>
                        <th>End</th>
                                                <th>Active</th>
                                                <th>Edit</th>
                                        </tr>
                                </thead>
                                <tbody id="web-listing-tbody">
                                        #foreach($webListing in $webListings)
                        #set($sd = $webListing.getStartDate())
                        #set($ed = $webListing.getEndDate())
                    <tr class="grab" data-id="$webListing.getId()"
                        data-start="#if($sd)$sd.toLocalDate()#end"
                        data-end="#if($ed)$ed.toLocalDate()#end">
                                                <td>$webListing.getId()</td>
                                                <td><a href="javascript:void(0)"
                                                        data-id="$webListing.getId()" class="web-offer-details">$webListing.getTitle()</a></td>
                                                #if($webListing.getLargeBannerUrl())
                                                <td>$webListing.getLargeBannerUrl()</td> #else
                            <td>-</td> #end
                        <td>#if($sd)$sd.toLocalDate()#else -#end</td>
                        <td>#if($ed)$ed.toLocalDate()#else -#end</td>
                                                #if($webListing.isActive())
                                                        <td><a class="web-listing-active" data-id="$webListing.getId()">Mark InActive</a></td>
                                                #else
                                                        <td><a class="web-listing-active" data-id="$webListing.getId()">Mark Active</a></td>
                                                #end
                                                <td><a data-id="$webListing.getId()"
                                                        data-target="#web-offer-edit-modal" data-toggle="modal"
                                                        class="web-offer-id">edit</a></td>
                                        </tr>
                                        #end


                                </tbody>
                        </table>
                </div>
        </div>
        <div class="col-lg-6">
                <div id="web-offer">
                        <div class="row">
                                <div class="col-lg-12 web-offer-products-container"></div>
                        </div>
                </div>
        </div>
</section>

<div class="web-offer-edit-container">

        <div id="web-offer-edit-modal" class="modal"
                id="web-editable-container" role="dialog">
                <div class="modal-dialog modal-md">
                        <!-- Modal content-->
                        <div class="modal-content" style="width: 800px; height: 300px;"></div>
                </div>
        </div>
</div>

<script type="text/javascript">
        $(document).ready(function() {
        var table = $('#catalog-feature-table').DataTable({
                        "bPaginate" : true,
                        "bLengthChange" : true,
                        "bFilter" : true,
                        "bInfo" : false,
                        "bAutoWidth" : false,
                        "pageLength" : 100
                });

        // Date filter: show only offers whose [startDate, endDate] covers the picked date.
        var _pickedIso = null;

        function updateNote() {
            var n = $('#catalog-feature-table tbody tr:visible').length;
            var txt = _pickedIso ? (n + ' offer(s) active on ' + _pickedIso) : '';
            $('#offer-active-on-note').text(txt);
        }

        $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
            if (settings.nTable.id !== 'catalog-feature-table') return true;
            if (!_pickedIso) return true;
            var row = table.row(dataIndex).node();
            if (!row) return true;
            var s = row.getAttribute('data-start') || '';
            var e = row.getAttribute('data-end') || '';
            if (!s && !e) return true;
            if (s && _pickedIso < s) return false;
            if (e && _pickedIso > e) return false;
            return true;
        });

        $('#offer-active-on').daterangepicker({
            singleDatePicker: true,
            autoApply: true,
            showDropdowns: true,
            autoUpdateInput: false,
            locale: {format: 'DD/MM/YYYY', cancelLabel: 'Clear'}
        }).on('apply.daterangepicker', function (ev, picker) {
            var d = picker.startDate;
            $(this).val(d.format('DD/MM/YYYY'));
            _pickedIso = d.format('YYYY-MM-DD');
            table.draw();
            updateNote();
        });

        $('#offer-active-on-clear').on('click', function (e) {
            e.preventDefault();
            $('#offer-active-on').val('');
            _pickedIso = null;
            table.draw();
            updateNote();
        });
        });
</script>