Subversion Repositories SmartDukaan

Rev

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

<style>
    .ps-container {
        max-width: 100%;
        padding: 0 10px;
    }

    .ps-section {
        margin-bottom: 24px;
    }

    .ps-section-title {
        font-size: 13px;
        font-weight: 700;
        color: #1e293b;
        padding: 10px 16px;
        background: linear-gradient(135deg, #f8fafc, #f1f5f9);
        border: 1px solid #e2e8f0;
        border-bottom: 2px solid #3b82f6;
        border-radius: 8px 8px 0 0;
        letter-spacing: 0.5px;
    }

    /* Active services: full-width striped rows */
    .ps-active-list {
        border: 1px solid #e2e8f0;
        border-top: none;
        border-radius: 0 0 8px 8px;
        overflow: hidden;
        background: #fff;
    }

    .ps-active-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: 12px 20px;
        border-bottom: 1px solid #e8ecf1;
        gap: 12px;
        min-height: 52px;
    }

    .ps-active-row:nth-child(even) {
        background: #f8fafc;
    }

    .ps-active-row:last-child {
        border-bottom: none;
    }

    .ps-active-row:hover {
        background: #eef2ff;
    }

    /* Pending services: 2-column grid */
    .ps-pending-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border: 1px solid #e2e8f0;
        border-top: none;
        border-radius: 0 0 8px 8px;
        overflow: hidden;
        background: #fff;
    }

    .ps-pending-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 20px;
        border-bottom: 1px solid #e8ecf1;
        border-right: 1px solid #e8ecf1;
        gap: 12px;
        min-height: 56px;
    }

    .ps-pending-item:nth-child(2n) {
        border-right: none;
    }

    .ps-pending-item:nth-child(odd):nth-last-child(-n+2),
    .ps-pending-item:nth-child(even):last-child {
        border-bottom: none;
    }

    .ps-pending-item:hover {
        background: #eef2ff;
    }

    /* Service name */
    .ps-name {
        font-size: 15px;
        font-weight: 700;
        color: #1e293b;
        min-width: 170px;
        flex-shrink: 0;
    }

    .ps-pending-item .ps-name {
        min-width: auto;
        flex: 1;
    }

    /* Actions group */
    .ps-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }

    /* Brands group */
    .ps-brands {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        margin-left: 8px;
        flex: 1;
    }

    /* Buttons */
    .ps-btn {
        padding: 4px 10px;
        font-size: 10px;
        font-weight: 600;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.15s ease;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        line-height: 1.6;
        white-space: nowrap;
    }

    .ps-btn-pni {
        background: #fef2f2;
        color: #dc2626;
        border: 1px solid #fecaca;
    }

    .ps-btn-pni:hover {
        background: #dc2626;
        color: #fff;
    }

    .ps-btn-applicable {
        background: #eff6ff;
        color: #2563eb;
        border: 1px solid #bfdbfe;
    }

    .ps-btn-applicable:hover {
        background: #2563eb;
        color: #fff;
    }

    .ps-btn-na {
        background: #fef2f2;
        color: #dc2626;
        border: 1px solid #fecaca;
    }

    .ps-btn-na:hover {
        background: #dc2626;
        color: #fff;
    }

    .ps-btn-activate {
        background: #f0fdf4;
        color: #16a34a;
        border: 1px solid #bbf7d0;
    }

    .ps-btn-activate:hover {
        background: #16a34a;
        color: #fff;
    }

    .ps-btn-deactivate {
        background: #fef2f2;
        color: #dc2626;
        border: 1px solid #fecaca;
    }

    .ps-btn-deactivate:hover {
        background: #dc2626;
        color: #fff;
    }

    /* Badge */
    .ps-badge {
        padding: 4px 12px;
        font-size: 11px;
        font-weight: 700;
        border-radius: 12px;
        letter-spacing: 0.3px;
        white-space: nowrap;
    }

    .ps-badge-active {
        background: #dcfce7;
        color: #16a34a;
    }

    .ps-badge-inactive {
        background: #fee2e2;
        color: #dc2626;
    }

    .ps-badge-pending {
        background: #fef9c3;
        color: #a16207;
    }

    /* Brand chips */
    .ps-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 12px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        color: #334155;
        white-space: nowrap;
    }

    .ps-chip input[type="checkbox"] {
        width: 15px;
        height: 15px;
        accent-color: #2563eb;
        margin: 0;
        cursor: pointer;
    }

    .ps-chip .ps-st {
        font-size: 14px;
        line-height: 1;
    }

    .ps-g {
        color: #16a34a;
    }

    .ps-r {
        color: #dc2626;
    }

    .ps-chip .ps-act {
        font-size: 10px;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 4px;
        text-decoration: none;
        cursor: pointer;
    }

    .ps-dim {
        opacity: 0.4;
    }

    .ps-code {
        font-size: 12px;
        font-weight: 600;
        color: #1e40af;
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        padding: 3px 10px;
        border-radius: 4px;
        font-family: monospace;
        letter-spacing: 0.3px;
    }

    a {
        text-decoration: none !important;
    }

    .tooltip-arrow,
    .red-tooltip + .tooltip.top > .tooltip-inner {
        background-color: #f00;
    }
</style>

<script>
    $(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip();
    });
</script>

#if($roleType=="false")
    ## ===================== PARTNER VIEW =====================
<section class="wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header"><i class="icon_document_alt"></i> SERVICE</h3>
            <ol class="breadcrumb">
                <li><i class="fa fa-home"></i>
                    <a href="${rc.contextPath}/dashboard">#springMessage("finservice.home")</a>
                </li>
                <li><i class="icon_document_alt"></i> #springMessage("finservice.partnerservice")</li>
                <li><a href="#videoModal" class="btn btn-danger" data-toggle="modal" data-src="prURXYMPaYo"><span
                        class="glyphicon glyphicon-play-circle"></span> #springMessage("finservice.playvideo")</a></li>
            </ol>
        </div>
    </div>

    ## --- Active Services ---
    <div class="ps-section">
        <div class="ps-section-title">Active Services</div>
        <div class="ps-active-list">
            #foreach($paymentOption in $paymentOptions)
                #if($serviceIdPartnerServiceMap.get($paymentOption.getId()).getApplicableType()=="YES")
                    #if($serviceIdPartnerServiceMap.get($paymentOption.getId()).getCode())
                        <div class="ps-active-row">
                            <span class="ps-name">$paymentOption.getName()</span>
                            <span class="ps-badge ps-badge-active">Active</span>
                            <span class="ps-code">$serviceIdPartnerServiceMap.get($paymentOption.getId()).getCode()</span>
                            <div class="ps-brands">
                                #foreach($serviceBrandsConfig in $serviceIdAndServiceBrandsConfigMap.get($paymentOption.getId()))
                                    #if($serviceBrandIdPartnerBrandServiceMap.get($serviceBrandsConfig.getId()))
                                        #if($serviceBrandIdPartnerBrandServiceMap.get($serviceBrandsConfig.getId()).getApplicableType()==
                                            "YES")
                                            #if($serviceBrandIdPartnerBrandServiceMap.get($serviceBrandsConfig.getId()).isActive()==true)
                                                #if($serviceBrandIdPartnerBrandServiceMap.get($serviceBrandsConfig.getId()).getPartnerStatusType()==
                                                    "WORKING")
                                                    <span class="ps-chip">
                                                <input type="checkbox" class="fin-service-brand"
                                                       value="$serviceBrandsConfig.getId()"
                                                       onchange="onChangeStateServiceBrand(this,$paymentOption.getId(),`$serviceBrandsConfig.getBrand()`)"
                                                       checked data-brand="$serviceBrandsConfig.getBrand()">
                                                        $serviceBrandsConfig.getBrand() <span class="ps-st ps-g">&#10004;</span>
                                            </span>
                                                #else
                                                    <span class="ps-chip">
                                                <input type="checkbox" class="fin-service-brand"
                                                       value="$serviceBrandsConfig.getId()"
                                                       onchange="onChangeStateServiceBrand(this,$paymentOption.getId(),`$serviceBrandsConfig.getBrand()`)"
                                                       disabled data-brand="$serviceBrandsConfig.getBrand()">
                                                        $serviceBrandsConfig.getBrand() <span class="ps-st ps-r"
                                                                                              title="NOT WORKING">&#10006;</span>
                                            </span>
                                                #end
                                            #else
                                                <span class="ps-chip">
                                            <input type="checkbox" class="fin-service-brand"
                                                   value="$serviceBrandsConfig.getId()"
                                                   onchange="onChangeStateServiceBrand(this,$paymentOption.getId(),`$serviceBrandsConfig.getBrand()`)"
                                                   disabled data-brand="$serviceBrandsConfig.getBrand()">
                                                    $serviceBrandsConfig.getBrand() <span class="ps-st ps-r"
                                                                                          data-toggle="tooltip"
                                                                                          title="INACTIVE">&#10005;</span>
                                        </span>
                                            #end
                                        #else
                                            <span class="ps-chip">
                                        <input type="checkbox" class="fin-service-brand"
                                               value="$serviceBrandsConfig.getId()"
                                               onchange="onChangeStateServiceBrand(this,$paymentOption.getId(),`$serviceBrandsConfig.getBrand()`)"
                                               disabled data-brand="$serviceBrandsConfig.getBrand()">
                                                $serviceBrandsConfig.getBrand() <button
                                                    class="notApplicableBrandService ps-act ps-btn-na"
                                                    data-nacommentservice="$serviceBrandIdPartnerBrandServiceMap.get($serviceBrandsConfig.getId()).getNa_Comment()">NA</button>
                                    </span>
                                        #end
                                    #else
                                        <span class="ps-chip">
                                    <input type="checkbox" class="fin-service-brand"
                                           value="$serviceBrandsConfig.getId()"
                                           onchange="onChangeStateServiceBrand(this,$paymentOption.getId(),`$serviceBrandsConfig.getBrand()`)"
                                           checked data-brand="$serviceBrandsConfig.getBrand()">
                                            $serviceBrandsConfig.getBrand()
                                </span>
                                    #end
                                #end
                            </div>
                        </div>
                    #end
                #end
            #end
        </div>
    </div>
</section>

#else
    ## ===================== ADMIN VIEW =====================

<div class="ps-container">
    ## --- Active / Inactive Services ---
    <div class="ps-section">
        <div class="ps-section-title">Active Services</div>
        <div class="ps-active-list">
            #foreach($paymentOption in $paymentOptions)
                #if($serviceIdPartnerServiceMap.get($paymentOption.getId()).getApplicableType()=="YES")
                    #if($serviceIdPartnerServiceMap.get($paymentOption.getId()).getCode())
                        ## --- Active WITH code ---
                        <div class="ps-active-row">
                            <span class="ps-name">$paymentOption.getName()</span>
                            <span class="ps-code">$serviceIdPartnerServiceMap.get($paymentOption.getId()).getCode()</span>
                            <div class="ps-actions">
                                <span class="ps-badge ps-badge-active">Active</span>
                                <button class="markNA ps-btn ps-btn-na" data-serviceid="$paymentOption.getId()">Not
                                    Applicable
                                </button>
                                <button class="deactivate-service ps-btn ps-btn-deactivate"
                                        data-serviceid="$paymentOption.getId()">Deactivate
                                </button>
                            </div>
                            <div class="ps-brands">
                                #foreach($serviceBrandsConfig in $serviceIdAndServiceBrandsConfigMap.get($paymentOption.getId()))
                                    #if($serviceBrandIdPartnerBrandServiceMap.get($serviceBrandsConfig.getId()))
                                        #if($serviceBrandIdPartnerBrandServiceMap.get($serviceBrandsConfig.getId()).getApplicableType()==
                                            "YES")
                                            #if($serviceBrandIdPartnerBrandServiceMap.get($serviceBrandsConfig.getId()).isActive()==true)
                                                #if($serviceBrandIdPartnerBrandServiceMap.get($serviceBrandsConfig.getId()).getPartnerStatusType()==
                                                    "WORKING")
                                                    <span class="ps-chip">
                                            <input type="checkbox" value="$serviceBrandsConfig.getId()"
                                                   onchange="onChangeStateServiceBrand(this,$paymentOption.getId())"
                                                   checked>
                                                        $serviceBrandsConfig.getBrand() <span class="ps-st ps-g">&#10004;</span>
                                            <a href="#" class="deactivate-brand-service-modal ps-act ps-btn-deactivate"
                                               data-serviceid="$paymentOption.getId()"
                                               data-servicebrandid="$serviceBrandsConfig.getId()" data-toggle="modal"
                                               data-target="#myServiceDeActivateBrand">Deactivate</a>
                                            <div id="myServiceDeActivateBrand" class="modal fade" role="dialog"></div>
                                        </span>
                                                #else
                                                    <span class="ps-chip">
                                            <input type="checkbox" value="$serviceBrandsConfig.getId()"
                                                   onchange="onChangeStateServiceBrand(this,$paymentOption.getId())">
                                                        $serviceBrandsConfig.getBrand() <span class="ps-st ps-r"
                                                                                              title="NOT WORKING">&#10006;</span>
                                        </span>
                                                #end
                                            #else
                                                <span class="ps-chip">
                                        <input type="checkbox" value="$serviceBrandsConfig.getId()"
                                               onchange="onChangeStateServiceBrand(this,$paymentOption.getId())"
                                               disabled>
                                                    $serviceBrandsConfig.getBrand() <span
                                                        class="ps-st ps-r">&#10005;</span>
                                        <a href="#" class="activate-brand-service-modal ps-act ps-btn-activate"
                                           data-serviceid="$paymentOption.getId()"
                                           data-servicebrandid="$serviceBrandsConfig.getId()" data-toggle="modal"
                                           data-target="#myServiceActivateBrand">Activate</a>
                                        <div id="myServiceActivateBrand" class="modal fade" role="dialog"></div>
                                    </span>
                                            #end
                                        #else
                                            <span class="ps-chip">
                                    <input type="checkbox" value="$serviceBrandsConfig.getId()"
                                           onchange="onChangeStateServiceBrand(this,$paymentOption.getId())" disabled>
                                                $serviceBrandsConfig.getBrand() <button
                                                    class="notApplicableBrandService ps-act ps-btn-na"
                                                    data-nacommentservice="$serviceBrandIdPartnerBrandServiceMap.get($serviceBrandsConfig.getId()).getNa_Comment()">NA</button>
                                </span>
                                        #end
                                    #else
                                        <span class="ps-chip">
                                <input type="checkbox" value="$serviceBrandsConfig.getId()"
                                       onchange="onChangeStateServiceBrand(this,$paymentOption.getId())" checked>
                                            $serviceBrandsConfig.getBrand() <span class="ps-st ps-g">&#10004;</span>
                                <a href="javascript:void(0)" class="deactivate-brand-service ps-act ps-btn-deactivate"
                                   data-serviceid="$paymentOption.getId()"
                                   data-servicebrandid="$serviceBrandsConfig.getId()">Deactivate</a>
                            </span>
                                    #end
                                #end
                            </div>
                        </div>

                    #else
                        ## --- Inactive (no code) ---
                        <div class="ps-active-row">
                            <span class="ps-name">$paymentOption.getName()</span>
                            <div class="ps-actions">
                                <span class="ps-badge ps-badge-inactive">Inactive</span>
                                <button class="markNA ps-btn ps-btn-na" data-serviceid="$paymentOption.getId()">Not
                                    Applicable
                                </button>
                                <button class="activate-service ps-btn ps-btn-activate"
                                        data-serviceid="$paymentOption.getId()">Activate
                                </button>
                            </div>
                            <div class="ps-brands">
                                #foreach($serviceBrandsConfig in $serviceIdAndServiceBrandsConfigMap.get($paymentOption.getId()))
                                    <span class="ps-chip ps-dim">
                            <input type="checkbox" value="$serviceBrandsConfig.getId()"
                                   onchange="onChangeStateServiceBrand(this,$paymentOption.getId())" disabled>
                                        $serviceBrandsConfig.getBrand()
                        </span>
                                #end
                            </div>
                        </div>
                    #end
                #end
            #end
        </div>
    </div>

    ## --- Pending Services ---
    <div class="ps-section">
        <div class="ps-section-title">Pending Services</div>
        <div class="ps-pending-grid">
            #foreach($paymentOption in $paymentOptions)
                #if($serviceIdPartnerServiceMap.get($paymentOption.getId()).getApplicableType()!="YES")
                    <div class="ps-pending-item">
                        <span class="ps-name">$paymentOption.getName()</span>
                        <div class="ps-actions">
                            <button class="notApplicableByPartner ps-btn ps-btn-pni" data-toggle="modal"
                                    data-target="#serviceDeactivateByPartnerModal"
                                    data-serviceid="$paymentOption.getId()">Not Interested
                            </button>
                            <button class="markApplicable ps-btn ps-btn-applicable"
                                    data-serviceid="$paymentOption.getId()">Applicable
                            </button>
                            <button class="markNA ps-btn ps-btn-na" data-serviceid="$paymentOption.getId()">Not
                                Applicable
                            </button>
                        </div>
                        <div id="serviceDeactivateByPartnerModal" class="modal fade" role="dialog"></div>
                    </div>
                #end
            #end
        </div>
    </div>
</div>## end ps-container
#end