<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" charset="utf-8">


    $(document).ready(function () {
        $('#example').dataTable({
            "bPaginate": false,
            "bStateSave": true,
            "sDom": 'TCR<"clear">lfrtip',
            "oTableTools": {
                "aButtons": [
                    "copy",
                    "print",
                    {
                        "sExtends": "collection",
                        "sButtonText": "حفظ",
                        "aButtons": ["csv", "xls"]
                    }
                ]
            }
        });
    });

</script>
<style>


    .dropzone {
        min-height: 150px;
        border: 1px solid #ddd!important;
        background: white;
        padding: 20px 20px;
        border-radius: 5px;
        margin: 5px;
        /* width: 100%; */
    }
    .dropzone .dz-preview .dz-details {
        opacity: 1;
    }
    .magnify:hover {
        position:relative;
        transition: transform .3s; /* Animation */
        transform: scale(3.5);
        z-index:999;
        top:-25px;
        left:-35px;
        display:block;
    }
.file-img{
    height: 46px;
    margin: 2px;
    width: 57px;
}
#Reviewed {
    table-layout: fixed;
    width: 100%;
}
    .multi-upload-container {
        text-align: center;
        transition: all 0.3s ease;
        min-height: 120px;
        position: relative;
    }
    
    .multi-upload-container:hover {
        border-color: #007bff;
        background-color: #f0f8ff;
    }
    
    .upload-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 12px;
        background: linear-gradient(135deg, #007bff, #0056b3);
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 500;
        font-size: 14px;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0,123,255,0.3);
    }
    
    .upload-btn:hover {
        background: linear-gradient(135deg, #0056b3, #004085);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,123,255,0.4);
    }
    
    .upload-btn:active {
        transform: translateY(0);
    }
    
    .upload-icon {
        width: 16px;
        height: 16px;
    }
    
    .clear-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 9px 12px;
        background: linear-gradient(135deg, #dc3545, #c82333);
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 500;
        font-size: 14px;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
        margin-left: 5px;
    }
    
    .clear-btn:hover {
        background: linear-gradient(135deg, #c82333, #bd2130);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(220, 53, 69, 0.4);
    }
    
    .clear-btn:active {
        transform: translateY(0);
    }
    
    .clear-icon {
        width: 16px;
        height: 16px;
    }
    
    .images-preview-container {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(3, auto);
        gap: 5px;
        margin-top: 5px;
        max-height: 280px;
        overflow-y: auto;
        padding: 5px;
    }
    
    .image-preview-item {
        position: relative;
        width: 80px;
        height: 80px;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transition: transform 0.3s ease;
        cursor: pointer;
        display:inline-block;
    }
    
    .image-preview-item:hover {
        transform: scale(1.05);
        z-index: 10;
    }
    
    .image-preview-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }
    
    .zoom-mode-toggle {
        position: fixed;
        top: 20px;
        left: 20px;
        background: rgba(255, 255, 255, 0.95);
        border: 2px solid #007bff;
        border-radius: 25px;
        padding: 8px 15px;
        z-index: 10000;
        display: flex;
        align-items: center;
        gap: 10px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        font-size: 14px;
        font-weight: 500;
    }
    
    .zoom-mode-toggle label {
        cursor: pointer;
        color: #333;
        user-select: none;
    }
    
    .zoom-mode-toggle input[type="checkbox"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }
    
    .zoom-mode-toggle .mode-text {
        color: #007bff;
        font-weight: 600;
    }
    
    .image-preview-item:hover img {
        transform: scale(3.5);
        z-index: 999;
        position: relative;
        box-shadow: 0 8px 32px rgba(0,0,0,0.3);
        border-radius: 8px;
        transition: transform 0.3s ease;
    }
    
    .image-preview-item:hover img.center-zoom {
        transform-origin: center center;
    }
    
    .image-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.9);
        z-index: 9999;
        display: none;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
    
    .image-overlay img {
        max-width: 90%;
        max-height: 90%;
        object-fit: contain;
        border-radius: 8px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    }
    
    .image-overlay-close {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 24px;
        color: #333;
        transition: background 0.3s ease;
    }
    
    .image-overlay-close:hover {
        background: rgba(255, 255, 255, 1);
    }
    
    .image-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 50px;
        height: 50px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 24px;
        color: #333;
        transition: all 0.3s ease;
        z-index: 10000;
    }
    
    .image-nav:hover {
        background: rgba(255, 255, 255, 1);
        transform: translateY(-50%) scale(1.1);
    }
    
    .image-nav.prev {
        left: 20px;
    }
    
    .image-nav.next {
        right: 20px;
    }
    
    .image-nav.disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }
    
    .image-nav.disabled:hover {
        transform: translateY(-50%) scale(1);
    }
    
    .remove-image-btn {
        position: absolute;
        top: 2px;
        right: 2px;
        background: rgba(220, 53, 69, 0.9);
        color: white;
        border: none;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        font-size: 12px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1001;
        transition: all 0.3s ease;
    }
    
    .remove-image-btn:hover {
        background: rgba(200, 35, 51, 1);
    }
    
    .upload-text {
        color: #666;
        font-size: 14px;
        margin-top: 10px;
    }
    
    .existing-images {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
    }
    
    .existing-image-item {
        position: relative;
        width: 60px;
        height: 60px;
        border-radius: 4px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }
    
    .existing-image-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .mTop{
        margin-top: 18px;
    }
    .mRight{
        margin-right: 3px;
    }
    .mBottom{
        margin-bottom: 25px;
    }
    .mStyle{
        width: 90px;text-align: center;
    }
    a:link, a:visited, a:hover, a:active{
        text-align: center !important;
    }
    .product-image-overlay {
        /*        position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.9);
                z-index: 9999;
                display: none;*/

        position: fixed;
        top: 15%;
        left: 40%;
        /* text-align: center; */
        width: 30%;
        height: 50%;
        background: rgba(4, 0, 0, 0.38);
        z-index: 9999;
        border-radius: 45px;
        display: none;
    }

    .product-image-overlay .product-image-overlay-close {
        display: block;
        position: absolute;
        top: 20px;
        left: 20px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid #eee;
        line-height: 35px;
        font-size: 20px;
        color: #eee;
        text-align: center;
        cursor: pointer;
    }

    .product-image-overlay img {
        width: auto;
        max-width: 80%;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    .nav-pills>li {
        float: right;
    }
</style>

<!-- Image Magnify Overlay -->
<div class="image-overlay" id="imageOverlay">
    <div class="image-overlay-close">×</div>
    <div class="image-nav prev" id="prevImage">›</div>
    <div class="image-nav next" id="nextImage">‹</div>
    <img id="overlayImage" src="" alt="Magnified Image">
</div>

<!-- Zoom Mode Toggle -->
<div class="zoom-mode-toggle" style="display: none;">
    <label for="zoomMode">
        <input type="checkbox" id="zoomMode" >
        <span class="mode-text">Cursor Zoom</span><!-- or Center Zoom if un checked-->
    </label>
</div>

<div class="row">
    <div class="container">
        <ol class="breadcrumb">
            <li><a href="#">المنتجات</a></li>
            <li><a href="#">المنتجات </a></li>
            <li class="active">عرض المنتجات</li>
        </ol>
        <div class="panel panel-default panel-m">
            <div class="panel-heading">
                <h3 class="panel-title">عرض المنتجات</h3>
                <a href="{$youtubes[56]->url}" target="_blank" class="hidden-print"><img src="../views/default/assets/img/youtube.png" class="pull-left" alt="Youtube" style="width: 2%;"></a>

            </div>
            <div class="panel-body">

                <!---------- start outputString alert ----------->
                <div id="outputString" class="alert alert-block alert-success fade in" style="display:none">
                    <button type="button" class="close pull-left" data-dismiss="alert" aria-hidden="true">&times;</button>
                    <p id="outputStringValue">{$outputString}</p>
                    <div class="clearfix"></div>
                </div>
                <!---------  end outputString alert ------------>
                <form class="form-inline hidden-print" action="productController.php?do=showImage" method="post">
                    <div class="form-group col-lg-5">
                        <label class="sr-only">تصنيف المنتج</label>
                        <select class="select2 wdt300 productCatt" data-level="0" name="productCatId0" id="productCatId0" >
                            <option value="-1">اختر تصنيف</option>
                            {foreach $catDataReport as $data}
                            <option value="{$data->productCatId}">{$data->productCatName}</option>
                            {/foreach}
                        </select>
                        <input type="hidden" id="level" name="level" value="0">

                    </div>
                    <div id="manyParents">

                    </div>
                    <div class="form-group col-lg-5" style="
    margin-right: -53px;
    padding: 6px;">
                        <label class="sr-only">المخازن</label>
                        <select class="select2 wdt300 store"  name="store" id="store">
                            <option value="-2">اختر المخزن</option>
                            <option value="-1">كل المخازن</option>
                            {foreach $allstores as $data}
                            <option value="{$data->storeId}">{$data->storeName}</option>
                            {/foreach}
                        </select>

                        <label>  <input name="image" type="checkbox" value="1"  {if $chk eq 1 } checked {/if}>الصور</label>
                    </div>

                    <input type="hidden" name="usergroupname" id="usergroupname" value="{$usergroupname}"/>
                    <button type="submit" class="btn btn-primary">بحث</button>
                </form>
                <br/>
            </div>
            <div class="panel panel-default panel-m">
                <!-- Default panel contents -->
                <div class="panel-heading">{$message}</div>

                <div class="alert alert-primary" role="alert">
                    <label class="sr-only">وصف التصنيف :</label>
                    <textarea name="productCatDescription" class="productCatDescription" data-id="{$productCatId}" data-type="productCatDescription" cols="50" rows="3">{$productCatDescription}</textarea>
                </div>
                
                <div id="exTab1" class="container">
                    <ul  class="nav nav-pills">
                        <li class="active">
                            <a  href="#1a" data-toggle="tab">الكل</a>
                        </li>
                        <li><a href="#2a" data-toggle="tab">المنتهي</a>
                        </li>
                    </ul>

                    <div class="tab-content clearfix">
                        <div class="tab-pane active" id="1a">
                            {literal}
                            <form id="form1" name="form1" method="post"
                                  action="productController.php?do=executeOperation2" onsubmit="if (Spry.Widget.Form.validate(this)) {
                        return countChoosenProducts('productController');
                        } else {
                        return false;
                        }
                        " enctype="multipart/form-data">
                                {/literal}

                                <div class="table-responsive" id="tableWrap">
                                    {if !empty($productsData)}
                                    <table class="display table-black" id="example">

                                        <thead>
                                        <tr>

                                            <th>اسم المنتج</th>
                                            <th {if $userGroupData->hideproductcatid eq 1 } class="hidden" {/if}> الصوره
                                                الرئيسية
                                            </th>
                                            <th> الصور</th>
                                            <th> الكميه</th>
                                            <th>الوصف</th>
                                            <th>معلومات تنزيل</th>
                                            <th>اسم المستخدم</th>
                                            <th>مراجعه</th>

                                        </tr>
                                        </thead>


                                        <tbody>
                                        <input type="hidden" name="pro_username" id="pro_username"
                                               value="{$username}">
                                        {if $chk == 0}

                                        {assign var=i value=1}

                                        {foreach $productsData as $data}
                                        {if $data->reviewType == 0}

                                        <tr>


                                            <input type="hidden" name="pro_id_{$i}" id="pro_id_{$i}"
                                                   value="{$data->productId}">


                                            <td>
                                                <label class="hidden hidden-print"> {$data->productName}/{$data->productCatName} </label>

                                                {$data->productName}/{$data->productCatName}


                                            </td>
                                            <td>

                                                <div class="img-upload-inline">
                                                    <label class="hidden hidden-print"> </label>

                                                    <img src="../views/default/images/product_image/{$data->logo}"
                                                         class="iamge_{$i}_0 magnify" alt="" width="122" height="75">
                                                    <input type="file" name="pro_Image_{$i}_0" data-type="ImageNew"
                                                           class="mStyle ImageNew Image_{$i}" data-itra="{$i}"
                                                           data-itracolum="0" data-id="{$data->productId}"
                                                           id="Image_{$i}_0"/>
                                                    <input type="hidden" name="oldlogo" id="oldlogo"
                                                           value="{$data->logo}">
                                                    <!--<img src="{$data->logo}">-->
                                                </div>
                                            </td>
                                            <td>
                                                <div class="multi-upload-container" data-product-id="{$data->productId}" data-row="{$i}">
                                                    <form id="product_form_{$i}" enctype="multipart/form-data">
                                                        <input type="file" class="product-images-input" id="product_images_{$i}" name="images[]" multiple accept="image/*" style="display: none;">
                                                        <input type="hidden" id="product_images_data_{$i}" name="product_images_data_{$i}">
                                                        <button type="button" class="upload-btn" onclick="document.getElementById('product_images_{$i}').click()">
                                                            <svg class="upload-icon" fill="currentColor" viewBox="0 0 20 20">
                                                                <path d="M16.88 9.1A4 4 0 0 1 16 17H5a5 5 0 0 1-1-9.9V7a3 3 0 0 1 4.52-2.59A4.98 4.98 0 0 1 17 8c0 .38-.04.74-.12 1.1zM11 11h3l-4-4-4 4h3v3h2v-3z"/>
                                                            </svg>
                                                            Choose Files
                                                        </button>
                                                        <button type="button" class="clear-btn" onclick="clearAllImages({$i})" title="Clear All Images">
                                                            <svg class="clear-icon" fill="currentColor" viewBox="0 0 20 20">
                                                                <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                                            </svg>
                                                        </button>
                                                    </form>
                                                    
                                                                                                        <div class="images-preview-container" id="preview_{$i}"></div>
                                                    <div class="existing-images" id="existing_{$i}">
                                                        <!-- Existing images will be loaded here -->
                                                    </div>
                                                    <input type="hidden" name="product_images_{$i}" id="product_images_data_{$i}" value="">
                                                </div>
                                            </td>
                                            <td>
                                                <label class="hidden hidden-print"> {$data->productquantity} </label>

                                                {$data->productquantity}

                                            </td>
                                            <td>
                                                <textarea name="Description" data-type="DescriptionNew"
                                                          class="form-control m_productNew DescriptionNew Description_{$i}"
                                                          data-itra="{$i}" data-id="{$data->productId}"
                                                          id="Description_{$data->productId}" style="height: 70px">{$data->productDescription}</textarea>
                                                <!--<input type="text" name="Description" data-type="DescriptionNew" class="mStyle m_productNew DescriptionNew Description_{$i}" data-itra="{$i}" data-id="{$data->productId}" id="Description_{$data->productId}" value='{$data->productDescription}'/>-->
                                                <label class="hidden hidden-print"> {$data->productDescription} </label>
                                            </td>

                                            <td>
                                                <textarea name="online" data-type="online"
                                                          class="form-control m_productNew online online_{$i}"
                                                          data-itra="{$i}" data-id="{$data->productId}"
                                                          id="online_{$data->productId}" style="height: 70px">{$data->online}</textarea>
                                                <label class="hidden hidden-print"> {$data->online} </label>
                                            </td>

                                            <td>

                                                {$data->username}{if $data->updatebyuser}<br/><span style="color: red">{$data->updatebyuser}</span>{/if}
                                            </td>

                                            <td><input type="button"  class="btn btn-primary Reviewed" id="rev_{$data->productId}" data-id="{$data->productId}"
                                                       value="مراجعه" {if ($data->productDescription eq "" || $data->productDescription eq null)
                                                || ($data->logo eq "" || $data->logo eq null || $data->logo eq ".")}disabled{/if}></td>

                                        </tr>

                                        {/if}
                                        {assign var=i value=$i+1}
                                        {/foreach}


                                        {else}

                                        {assign var=i value=1}

                                        {foreach $productsData as $data}
                                        {if {$data->logo} eq "" || {$data->logo} eq '.'}
                                        {if $data->reviewType == 0}

                                        <tr>


                                            <input type="hidden" name="pro_id_{$i}" id="pro_id_{$i}"
                                                   value="{$data->productId}">

                                            <td>
                                                <label class="hidden hidden-print"> {$data->productName}/{$data->productCatName} </label>

                                                {$data->productName}/{$data->productCatName}


                                            </td>

                                            {if {$Programsettingdata->priceing} eq 0}

                                            <td>
                                                <div class="img-upload-inline">
                                                    <label class="hidden hidden-print"> </label>

                                                    <img src="../views/default/images/product_image/{$data->logo}"
                                                         class="iamge_{$i}_0 magnify" alt="" width="122" height="75">
                                                    <input type="file" name="pro_Image_{$i}_0" data-type="ImageNew"
                                                           class="mStyle ImageNew Image_{$i}" data-itra="{$i}"
                                                           data-itracolum="0" data-id="{$data->productId}"
                                                           id="Image_{$i}_0"/>
                                                    <input type="hidden" name="oldlogo" id="oldlogo"
                                                           value="{$data->logo}">
                                                    <!--<img src="{$data->logo}">-->
                                                </div>


                                            </td>

                                            <td>
                                                <div class="multi-upload-container" data-product-id="{$data->productId}" data-row="{$i}">
                                                    <form id="product_form_{$i}" enctype="multipart/form-data">
                                                        <input type="file" class="product-images-input" id="product_images_{$i}" name="images[]" multiple accept="image/*" style="display: none;">
                                                        <input type="hidden" id="product_images_data_{$i}" name="product_images_data_{$i}">
                                                        <button type="button" class="upload-btn" onclick="document.getElementById('product_images_{$i}').click()">
                                                            <svg class="upload-icon" fill="currentColor" viewBox="0 0 20 20">
                                                                <path d="M16.88 9.1A4 4 0 0 1 16 17H5a5 5 0 0 1-1-9.9V7a3 3 0 0 1 4.52-2.59A4.98 4.98 0 0 1 17 8c0 .38-.04.74-.12 1.1zM11 11h3l-4-4-4 4h3v3h2v-3z"/>
                                                            </svg>
                                                            Choose Files
                                                        </button>
                                                        <button type="button" class="clear-btn" onclick="clearAllImages({$i})" title="Clear All Images">
                                                            <svg class="clear-icon" fill="currentColor" viewBox="0 0 20 20">
                                                                <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                                            </svg>
                                                        </button>
                                                    </form>
                                                    
                                                                                                        <div class="images-preview-container" id="preview_{$i}"></div>
                                                    <div class="existing-images" id="existing_{$i}">
                                                        <!-- Existing images will be loaded here -->
                                                    </div>
                                                    <input type="hidden" name="product_images_{$i}" id="product_images_data_{$i}" value="">
                                                </div>
                                            </td>
                                            <td>
                                                <label class="hidden hidden-print"> {$data->quan} </label>

                                                {$data->quan}

                                            </td>
                                            <td>
                                                <textarea name="Description" data-type="DescriptionNew"
                                                          class="form-control m_productNew DescriptionNew Description_{$i}"
                                                          data-itra="{$i}" data-id="{$data->productId}"
                                                          id="Description_{$data->productId}" style="height: 70px">{$data->productDescription}</textarea>
                                                <!--<input type="text" name="Description" data-type="DescriptionNew" class="mStyle m_productNew DescriptionNew Description_{$i}" data-itra="{$i}" data-id="{$data->productId}" id="Description_{$data->productId}" value='{$data->productDescription}'/>-->
                                                <label class="hidden hidden-print"> {$data->productDescription} </label>
                                            </td>

                                            <td>
                                                <textarea name="online" data-type="online"
                                                          class="form-control m_productNew online online_{$i}"
                                                          data-itra="{$i}" data-id="{$data->productId}"
                                                          id="online_{$data->productId}" style="height: 70px">{$data->online}</textarea>
                                                <label class="hidden hidden-print"> {$data->online} </label>
                                            </td>

                                            <td>

                                                {$data->username}{if $data->updatebyuser}<br/><span style="color: red">{$data->updatebyuser}</span>{/if}

                                            </td>

                                            <td><input type="button"  class="btn btn-primary Reviewed" id="rev_{$data->productId}" data-id="{$data->productId}"
                                                       value="مراجعه" {if ($data->productDescription eq "" || $data->productDescription eq null)
                                                || ($data->logo eq "" || $data->logo eq null || $data->logo eq ".")}disabled{/if}></td>

                                            {/if}
                                            <!--<td  class="hidden-print "> {if {$data->conditions} eq 0} <a style="margin-right: 22px !important;" href="productController.php?do=tempdelete&id={$data->productId}&optic={$data->isOptic}"  type="button" class="btn btn-default btn-lg removeicon"> </a> {elseif {$data->conditions} eq 1 } <a  href="productController.php?do=returndelete&id={$data->productId}&optic={$data->isOptic}"  type="button" class="btn btn-default btn-lg correcticon"> </a></td>-->
                                            {/if}


                                        </tr>

                                        {/if}
                                        {/if}
                                        {assign var=i value=$i+1}
                                        {/foreach}

                                        {/if}


                                        </tbody>


                                    </table>
                                    {/if}

                                    <div class="clearfix"></div>
                                </div>
                                <hr/>
                                <div class="hidden-print">
                                    <div class="col-lg-12">
                                        <div class="well well-sm">
                                            <div class="form-group">
                                                <div class="col-lg-4">
                                                    <label for="operation"></label>
                                                    <span id="spryselect1">
                        <select name="operation" id="operation" data-placeholder="اختر العملية" class="select2 wdt100">
                        <option></option>
                        <option value="1">حذف مؤقت</option>

                        <option value="2">إلغاء الحذف</option>
                        </select>
                        <span class="selectRequiredMsg">اختر العملية</span></span></div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-lg-4">
                                                    <input name="" class="hidden-print btn btn-primary" type="submit"
                                                           value="تنفيذ"/>
                                                </div>
                                            </div>

                                            <!-----------  start noElementsError alert ------------->
                                            <div class="clearfix"></div>
                                            <div id="noElementsError" class="alert alert-danger fade in"
                                                 style="display:none;">
                                                <button type="button" class="close pull-left" data-dismiss="alert"
                                                        aria-hidden="true">×
                                                </button>
                                                <p>يجب اختيار العناصر أولاً</p>
                                                <div class="clearfix"></div>
                                            </div>
                                            <!----------  end noElementsError alert -------------->

                                            <div class="clearfix"></div>
                                        </div>
                                    </div>
                                    <div class="clearfix"></div>
                                </div>


                                <!-- Modal -->
                                <div class="hidden-print">
                                    <div class="modal fade " id="myModal1" tabindex="-1" role="dialog"
                                         aria-labelledby="myModalLabel" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close pull-left" data-dismiss="modal"
                                                            aria-hidden="true">&times;
                                                    </button>
                                                    <h4 class="modal-title">تأكيد حذف مجموعة</h4>
                                                </div>
                                                <div class="modal-body"> هل تريد حذف هذا المنتج ؟</div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default" data-dismiss="modal">
                                                        لا
                                                    </button>
                                                    <button type="button" class="btn btn-primary savemodel1">نعم
                                                    </button>
                                                </div>
                                            </div>
                                            <!-- /.modal-content -->
                                        </div>
                                        <!-- /.modal-dialog -->
                                    </div>
                                </div>
                                <!-- /.modal -->

                                <div class="hidden-print">
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <div class="col-lg-4">
                                                <button type="button" onclick="print_Custom('mycustomheader');"
                                                        class="btn btn-success pull-right">طباعة
                                                </button>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="clearfix"></div>
                                </div>
                            </form>
                        </div>
                        <div class="tab-pane" id="2a">

                            <table class="table" id="Reviewed">
                                <thead>
                                <tr>
                                    <th>اسم المنتج</th>
                                    <th> الصوره الرئيسية</th>
                                    <th style="width: 30%;"> الصور</th>
                                    <th> الكمية</th>
                                    <th>الوصف</th>
                                    <th>معلومات تنزيل</th>
                                    <th>اسم المستخدم</th>
                                </tr>
                                </thead>
                                <tbody>


                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>


    <script>

        var spryselect1 = new Spry.Widget.ValidationSelect("spryselect1");

        $('body').on('click', '.moImg', function () {

            $('body').append('<div class="product-image-overlay"><span class="product-image-overlay-close">x</span><img src="" /></div>');
            var productImage = $('img');
            var productOverlay = $('.product-image-overlay');
            var productOverlayImage = $('.product-image-overlay img');

            productImage.click(function () {
                var productImageSource = $(this).attr('src');

                productOverlayImage.attr('src', productImageSource);
                productOverlay.fadeIn(100);
                $('body').css('overflow', 'hidden');

                $('.product-image-overlay-close').click(function () {
                    productOverlay.fadeOut(100);
                    $('body').css('overflow', 'auto');
                });
            });
        });

        // Multi-upload functionality
        $(document).ready(function() {
            // Initialize existing images for each product row
            $('.multi-upload-container').each(function() {
                var productId = $(this).data('product-id');
                var row = $(this).data('row');
                loadExistingImages(productId, row);
            });

            // Handle file input changes
            $('.product-images-input').on('change', function(e) {
                var row = $(this).closest('.multi-upload-container').data('row');
                handleMultiUploadChange(this, row);
            });

            // Enable sortable reordering for image previews
            $('.images-preview-container').sortable({
                items: '.image-preview-item',
                update: function(event, ui) {
                    var row = $(this).closest('.multi-upload-container').data('row');
                    updateImageOrder(row);
                }
            });

            function updateImageOrder(row) {
                var imageData = [];
                
                $('#preview_' + row).find('.image-preview-item img').each(function(index) {
                    imageData.push({
                        name: 'image_' + index,
                        data: $(this).attr('src'),
                        order: index
                    });
                });
                
                $('#product_images_data_' + row).val(JSON.stringify(imageData));
                console.log("Images in row " + row + " reordered");
            }

            function handleFileSelect(files, row) {
                var previewContainer = $('#preview_' + row);
                previewContainer.empty();
                
                var imageData = [];
                
                for (var i = 0; i < files.length; i++) {
                    var file = files[i];
                    var reader = new FileReader();
                    
                    reader.onload = (function(file, index) {
                        return function(e) {
                            var imageContainer = $('<div>').addClass('image-preview-item');
                            var image = $('<img>').attr('src', e.target.result).addClass('preview-image').css('cursor', 'pointer');
                            var removeBtn = $('<button>').addClass('remove-image-btn').html('×').attr('data-index', index);
                            
                            // Add click event for magnify
                            image.on('click', function() {
                                var allImages = [];
                                var currentIndex = 0;
                                
                                // Collect all images from this row
                                $('#preview_' + row + ' img, #existing_' + row + ' img').each(function(idx) {
                                    allImages.push($(this).attr('src'));
                                    if ($(this).attr('src') === e.target.result) {
                                        currentIndex = idx;
                                    }
                                });
                                
                                magnifyImage(e.target.result, allImages, currentIndex);
                            });
                            
                            imageContainer.append(image);
                            imageContainer.append(removeBtn);
                            previewContainer.append(imageContainer);
                            
                            imageData.push({
                                name: file.name,
                                data: e.target.result,
                                order: index
                            });
                            
                            // Update hidden input with image data
                            $('#product_images_data_' + row).val(JSON.stringify(imageData));
                            
                            // Trigger change event for existing functionality
                            triggerImageChange(row);
                        };
                    })(file, i);
                    
                    reader.readAsDataURL(file);
                }
            }

            var currentImageIndex = 0;
            var currentImages = [];

            function magnifyImage(imageSrc, allImages, currentIndex) {
                $('#overlayImage').attr('src', imageSrc);
                $('#imageOverlay').css('display', 'flex');
                
                // Store images for navigation
                currentImages = allImages || [];
                currentImageIndex = currentIndex || 0;
                
                // Update navigation buttons
                updateNavigationButtons();
            }

            function navigateImage(direction) {
                if (currentImages.length === 0) return;
                
                currentImageIndex += direction;
                
                // Wrap around
                if (currentImageIndex < 0) {
                    currentImageIndex = currentImages.length - 1;
                } else if (currentImageIndex >= currentImages.length) {
                    currentImageIndex = 0;
                }
                
                // Update image
                $('#overlayImage').attr('src', currentImages[currentImageIndex]);
                
                // Update navigation buttons
                updateNavigationButtons();
            }

            function updateNavigationButtons() {
                var $prev = $('#prevImage');
                var $next = $('#nextImage');
                
                if (currentImages.length <= 1) {
                    // Hide navigation if only one image
                    $prev.addClass('disabled');
                    $next.addClass('disabled');
                } else {
                    // Show navigation
                    $prev.removeClass('disabled');
                    $next.removeClass('disabled');
                }
            }

            function closeImageOverlay() {
                $('#imageOverlay').css('display', 'none');
                currentImages = [];
                currentImageIndex = 0;
            }

            // Close overlay when clicking on the background
            $(document).on('click', '#imageOverlay', function(e) {
                if (e.target === this) {
                    closeImageOverlay();
                }
            });

            // Close overlay with close button
            $(document).on('click', '.image-overlay-close', function(e) {
                e.stopPropagation();
                closeImageOverlay();
            });

            // Handle zoom mode toggle
            $('#zoomMode').on('change', function() {
                var isCursorZoom = $(this).is(':checked');
                $('.mode-text').text(isCursorZoom ? 'Cursor Zoom' : 'Center Zoom');
                
                if (!isCursorZoom) {
                    // Remove position-based zoom when disabled
                    $('.image-preview-item img').css('transform-origin', 'center center').addClass('center-zoom');
                } else {
                    $('.image-preview-item img').removeClass('center-zoom');
                }
            });

            // Handle mouse movement for position-based zoom (only when enabled)
            $(document).on('mousemove', '.image-preview-item', function(e) {
                if (!$('#zoomMode').is(':checked')) {
                    return; // Skip if cursor zoom is disabled
                }
                
                var $img = $(this).find('img');
                var rect = this.getBoundingClientRect();
                var x = ((e.clientX - rect.left) / rect.width) * 100;
                var y = ((e.clientY - rect.top) / rect.height) * 100;
                
                // Set transform origin directly
                $img.css('transform-origin', x + '% ' + y + '%');
            });

            // Handle remove image button clicks
            $(document).on('click', '.remove-image-btn', function(e) {
                e.stopPropagation();
                var row = $(this).closest('.multi-upload-container').data('row');
                var index = $(this).attr('data-index');
                var imageData = JSON.parse($('#product_images_data_' + row).val());
                imageData.splice(index, 1);
                $('#product_images_data_' + row).val(JSON.stringify(imageData));
                $(this).closest('.image-preview-item').remove();
                triggerImageChange(row);
            });

            $(document).on('click', '#prevImage', function(e) {
                e.stopPropagation();
                navigateImage(-1);
            });

            $(document).on('click', '#nextImage', function(e) {
                e.stopPropagation();
                navigateImage(1);
            });

            // Close overlay with Escape key
            $(document).on('keydown', function(e) {
                if (e.key === 'Escape') {
                    closeImageOverlay();
                } else if ($('#imageOverlay').css('display') === 'flex') {
                    // Arrow key navigation when overlay is open
                    if (e.key === 'ArrowLeft') {
                        navigateImage(-1);
                        e.preventDefault();
                    } else if (e.key === 'ArrowRight') {
                        navigateImage(1);
                        e.preventDefault();
                    }
                }
            });

            function loadExistingImages(productId, row) {
                $.ajax({
                    url: 'productControllerAjax.php?do=getProductImages',
                    type: 'POST',
                    data: { product_id: productId },
                    success: function(response) {
                        var images = JSON.parse(response);
                        var existingContainer = $('#existing_' + row);
                        
                        images.forEach(function(image, index) {
                            var imageItem = $('<div>').addClass('existing-image-item');
                            var img = $('<img>').attr('src', '../views/default/images/product_image/' + image.imagename).addClass('magnify').css('cursor', 'pointer');
                            var removeBtn = $('<button>').addClass('remove-image-btn').html('×').attr('data-image-id', image.id);
                            
                            // Add click event for magnify
                            img.on('click', function() {
                                var allImages = [];
                                var currentIndex = 0;
                                
                                // Collect all images from this row
                                $('#preview_' + row + ' img, #existing_' + row + ' img').each(function(idx) {
                                    allImages.push($(this).attr('src'));
                                    if ($(this).attr('src') === '../views/default/images/product_image/' + image.imagename) {
                                        currentIndex = idx;
                                    }
                                });
                                
                                magnifyImage('../views/default/images/product_image/' + image.imagename, allImages, currentIndex);
                            });
                            
                            imageItem.append(img);
                            imageItem.append(removeBtn);
                            existingContainer.append(imageItem);
                        });
                    }
                });
            }

            function triggerImageChange(row) {
                // Trigger the existing image change functionality
                var pro_id = $('.multi-upload-container[data-row="' + row + '"]').data('product-id');
                
                setTimeout(function() {
                    $.ajax({
                        type: "POST",
                        url: 'productControllerAjax.php?do=getImageDesc',
                        data: { pro_id: pro_id },
                        cache: false,
                        success: function (data) {
                            var re = JSON.parse(data)
                            var bt = document.getElementById('rev_' + re.productId);
                            if ((re.productDescription == "" || re.productDescription == null)
                                || (re.logo == "" || re.logo == null || re.logo == ".")) {
                                bt.disabled = true;
                            } else {
                                bt.disabled = false;
                            }
                        }
                    });
                }, 100);
            }

            function handleMultiUploadChange(input, row) {
                var files = input.files;
                var previewContainer = $('#preview_' + row);
                // لا تمسح المعاينات الموجودة - أضف الصور الجديدة فقط
                
                var imageData = [];
                var validFiles = [];
                var invalidFiles = [];
                
                // Validate files before processing
                for (var i = 0; i < files.length; i++) {
                    var file = files[i];
                    if (isValidImageFile(file)) {
                        validFiles.push(file);
                    } else {
                        invalidFiles.push(file);
                    }
                }
                
                // Show error for invalid files but still process valid ones
                if (invalidFiles.length > 0) {
                    var invalidFileNames = invalidFiles.map(function(file) {
                        return file.name + ' (' + file.type + ')';
                    }).join(', ');
                    alert('ملفات ممنوعة تم تجاهلها.\n\nالملفات الممنوعة: ' + invalidFileNames + '\n\nالامتدادات المسموح بها: JPG, JPEG, PNG, GIF, BMP, WEBP');
                }
                
                // Process only valid files
                for (var i = 0; i < validFiles.length; i++) {
                    var file = validFiles[i];
                    var reader = new FileReader();
                    
                    reader.onload = (function(file, originalIndex) {
                        return function(e) {
                            var imageContainer = $('<div>').addClass('image-preview-item');
                            var image = $('<img>').attr('src', e.target.result).addClass('preview-image').css('cursor', 'pointer');
                            var removeBtn = $('<button>').addClass('remove-image-btn').html('×').attr('data-index', imageData.length);
                            
                            // Add click event for magnify
                            image.on('click', function() {
                                var allImages = [];
                                var currentIndex = 0;
                                
                                // Collect all images from this row
                                $('#preview_' + row + ' img, #existing_' + row + ' img').each(function(idx) {
                                    allImages.push($(this).attr('src'));
                                    if ($(this).attr('src') === e.target.result) {
                                        currentIndex = idx;
                                    }
                                });
                                
                                magnifyImage(e.target.result, allImages, currentIndex);
                            });
                            
                            imageContainer.append(image);
                            imageContainer.append(removeBtn);
                            previewContainer.append(imageContainer);
                            
                            // تخزين معلومات الملف بدلاً من base64
                            imageData.push({
                                name: file.name,
                                file: file,  // تخزين كائن الملف
                                order: imageData.length
                            });
                            
                            // Update hidden input with image data
                            $('#product_images_data_' + row).val(JSON.stringify(imageData));
                            
                            // Trigger change event for existing functionality
                            triggerImageChange(row);
                        };
                    })(file, i);
                    
                    reader.readAsDataURL(file);
                }
            }

            // Helper function to validate image files
            function isValidImageFile(file) {
                if (!file) return false;
                
                var validImageTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/bmp', 'image/webp'];
                var validExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp'];
                
                var fileName = file.name.toLowerCase();
                
                // Check MIME type if available
                if (file.type) {
                    if (validImageTypes.indexOf(file.type.toLowerCase()) !== -1) {
                        return true;
                    }
                    // If MIME type exists but is not in valid types, reject immediately
                    return false;
                }
                
                // If no MIME type, rely only on extension check
                for (var i = 0; i < validExtensions.length; i++) {
                    if (fileName.endsWith(validExtensions[i])) {
                        return true;
                    }
                }
                
                return false;
            }
        });

    </script>
