File Manager

✏️ Edit File: /home/u625410797/domains/iooi.co.th/public_html/admin/manage_solution_details.php

<?php 
session_start();
if($_SESSION["COL_iduser"] && $_SESSION["COL_username"] && $_SESSION["COL_status"] && $_SESSION["COL_type"]!=""){
require_once("conn.php");

$solution_id = isset($_GET['id']) ? intval($_GET['id']) : 0;
if ($solution_id <= 0) {
    header("Location: uploadsolution.php?List=0");
    exit();
}

// Fetch solution metadata
$solutionQuery = $conn->query("SELECT * FROM solutions WHERE no = $solution_id");
$solution = $solutionQuery ? $solutionQuery->fetch_assoc() : null;
if (!$solution) {
    header("Location: uploadsolution.php?List=0");
    exit();
}

// Fetch existing details/sections
$detailsQuery = $conn->query("SELECT * FROM solution_details WHERE solution_id = $solution_id ORDER BY section_order ASC");
?>
<html lang="en">

<head>
    <link rel="icon" href="img/logo-4.png" sizes="48x48" >
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Manage Solution Details | Web Management</title>
    <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link href="css/sb-admin-2.css" rel="stylesheet">
    <link href="vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Sarabun:400,500&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css">
    <style>
        body { font-family: 'Sarabun', sans-serif; }
        .section-card {
            transition: all 0.3s ease;
            border-left: 4px solid #4e73df;
        }
        .section-card:hover {
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

/* Professional Image Upload Styles matching footer_manager.php */
        .upload-zone {
            border: 2px dashed #cbd5e0;
            border-radius: 12px;
            padding: 30px 20px;
            text-align: center;
            background: #f8f9fc;
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            min-height: 150px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .upload-zone:hover, .upload-zone.dragover {
            border-color: #4e73df;
            background: #f0f3ff;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(78, 115, 223, 0.15);
        }
        .upload-zone .upload-icon {
            font-size: 3rem;
            color: #4e73df;
            margin-bottom: 12px;
        }
        .upload-zone .upload-text {
            color: #4a5568;
            font-size: 0.9rem;
            margin-bottom: 8px;
        }
        .upload-zone .upload-subtext {
            color: #a0aec0;
            font-size: 0.75rem;
        }
        .upload-zone input[type="file"] {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            opacity: 0;
            cursor: pointer;
        }
        
        .image-preview-container {
            margin-top: 15px;
            position: relative;
            display: none;
        }
        .image-preview-container.active {
            display: block;
        }
        .image-preview {
            max-width: 100%;
            max-height: 250px;
            border-radius: 8px;
            border: 2px solid #e2e8f0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .preview-actions {
            margin-top: 10px;
            display: flex;
            gap: 8px;
            justify-content: center;
        }
        .preview-actions button {
            padding: 6px 12px;
            font-size: 0.8rem;
            border-radius: 6px;
        }
        
        /* Cropper Modal */
        .cropper-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.8);
            z-index: 10000;
            align-items: center;
            justify-content: center;
        }
        .cropper-modal.active {
            display: flex;
        }
        .cropper-container {
            background: white;
            border-radius: 12px;
            padding: 20px;
            max-width: 90%;
            max-height: 90%;
            display: flex;
            flex-direction: column;
        }
        .cropper-wrapper {
            max-height: 60vh;
            overflow: hidden;
            margin-bottom: 15px;
        }
        .cropper-wrapper img {
            max-width: 100%;
            max-height: 60vh;
        }
        .cropper-actions {
            display: flex;
            gap: 10px;
            justify-content: center;
            padding-top: 15px;
            border-top: 1px solid #e2e8f0;
        }
        
        .file-info {
            margin-top: 10px;
            padding: 10px;
            background: #f7fafc;
            border-radius: 6px;
            font-size: 0.8rem;
            color: #4a5568;
            display: none;
        }
        .file-info.active {
            display: block;
        }
        .file-info .info-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 4px;
        }
        .file-info .info-label {
            color: #718096;
        }
        .file-info .info-value {
            font-weight: 600;
        }
    </style>
</head>

<?php include("menu.php"); ?>

<div id="content-wrapper" class="d-flex flex-column">
            <div id="content">
                <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow" style="background: linear-gradient(90deg, #ffffff 0%, #f8f9fa 100%);">
                    <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
                        <i class="fa fa-bars text-primary"></i>
                    </button>
                    
                    <h1 class="h3 mb-0 text-dark font-weight-bold"><i class="fas fa-file-invoice text-primary mr-2"></i>Solution Details Report Manager</h1>
                    
                    <ul class="navbar-nav ml-auto">
                        <?php include("useract.php"); ?>
                    </ul>
                </nav>

<div class="container-fluid">
                    
                    <div class="card mb-4 bg-light border-left-primary shadow-sm">
                        <div class="card-body py-3 d-flex justify-content-between align-items-center">
                            <div>
                                <h5 class="m-0 font-weight-bold text-primary">
                                    <i class="fas fa-edit mr-2"></i>Solution: <?php echo htmlspecialchars($solution['solutionName']); ?>
                                </h5>
                                <p class="m-0 text-muted small">Add and arrange paragraphs, descriptions, and images to form a premium report.</p>
                            </div>
                            <a href="uploadsolution.php?List=0" class="btn btn-secondary btn-icon-split">
                                <span class="icon text-white-50"><i class="fas fa-arrow-left"></i></span>
                                <span class="text">Back to Solutions</span>
                            </a>
                        </div>
                    </div>

<div class="row">
                        
                        <div class="col-lg-5 mb-4">
                            <div class="card shadow">
                                <div class="card-header py-3 bg-primary text-white">
                                    <h6 class="m-0 font-weight-bold"><i class="fas fa-plus-circle mr-2"></i>Add Report Section</h6>
                                </div>
                                <div class="card-body">
                                    <form id="addSectionForm" enctype="multipart/form-data">
                                        <input type="hidden" name="solution_id" value="<?php echo $solution_id; ?>">
                                        
                                        <div class="form-group">
                                            <label class="font-weight-bold text-dark">Section Title / Topic</label>
                                            <input type="text" class="form-control" name="title" placeholder="e.g. Hardware Integration & Specs">
                                        </div>

<div class="form-group">
                                            <label class="font-weight-bold text-dark">Layout Presentation Style</label>
                                            <select class="form-control" name="layout_type">
                                                <option value="image_left">Image on Left, Text on Right</option>
                                                <option value="image_right">Text on Left, Image on Right</option>
                                                <option value="full_width">Full Width Image (Content below)</option>
                                                <option value="text_only">Text Only (No image)</option>
                                            </select>
                                        </div>

<div class="form-group">
                                            <label class="font-weight-bold text-dark">Section Image</label>
                                            <div class="upload-zone" id="addUploadZone">
                                                <input type="file" id="addFileInput" name="imageFile" accept="image/*">
                                                <i class="fas fa-cloud-upload-alt upload-icon"></i>
                                                <div class="upload-text">ลากไฟล์รูปภาพมาวางที่นี่ หรือคลิกเพื่อเลือก</div>
                                                <div class="upload-subtext">รองรับ JPEG, PNG, GIF, WebP (สูงสุด 10MB)</div>
                                            </div>

<div class="image-preview-container" id="addPreviewContainer">
                                                <img src="" alt="Preview" class="image-preview" id="addPreview">
                                                <div class="preview-actions">
                                                    <button type="button" class="btn btn-info btn-sm" onclick="openCropper('add')">
                                                        <i class="fas fa-crop-alt"></i> ครอปรูป
                                                    </button>
                                                    <button type="button" class="btn btn-secondary btn-sm" onclick="removeImage('add')">
                                                        <i class="fas fa-trash"></i> ลบรูปภาพ
                                                    </button>
                                                </div>
                                            </div>

<div class="file-info" id="addFileInfo">
                                                <div class="info-row">
                                                    <span class="info-label">ขนาดไฟล์:</span>
                                                    <span class="info-value" id="addFileSize">-</span>
                                                </div>
                                                <div class="info-row">
                                                    <span class="info-label">ขนาดมิติภาพ:</span>
                                                    <span class="info-value" id="addDimensions">-</span>
                                                </div>
                                            </div>
                                        </div>

<div class="form-group">
                                            <label class="font-weight-bold text-dark">Description Content (อธิบายรายละเอียด)</label>
                                            <textarea class="form-control" name="content" rows="6" placeholder="Enter paragraph detail for this section..."></textarea>
                                        </div>

<button type="submit" class="btn btn-success btn-block py-2">
                                            <i class="fas fa-save mr-2"></i>Save Section
                                        </button>
                                    </form>
                                </div>
                            </div>

<div class="card shadow mt-4">
                                <div class="card-header py-3 bg-primary text-white d-flex justify-content-between align-items-center">
                                    <h6 class="m-0 font-weight-bold"><i class="fas fa-cubes mr-2"></i>Related System Products</h6>
                                </div>
                                <div class="card-body">
                                    
                                    <div class="form-group">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><i class="fas fa-search text-primary"></i></span>
                                            </div>
                                            <input type="text" id="productSearch" class="form-control" placeholder="ค้นหาชื่อผลิตภัณฑ์...">
                                        </div>
                                    </div>
                                    
                                    <div style="max-height: 350px; overflow-y: auto; border: 1px solid #e3e6f0; border-radius: 8px; padding: 12px; background-color: #f8f9fc;" id="productListContainer">
                                        <?php
                                        // Fetch all active products
                                        $productsRes = $conn->query("SELECT prodID, prodName, solutionGroup FROM products WHERE prodStatus = '1' ORDER BY prodName ASC");
                                        if ($productsRes && $productsRes->num_rows > 0):
                                            while ($prod = $productsRes->fetch_assoc()):
                                                $groups = array_filter(explode(',', $prod['solutionGroup'] ?? ''));
                                                $isChecked = in_array(strval($solution_id), $groups) ? 'checked' : '';
                                        ?>
                                            <div class="custom-control custom-checkbox mb-2 product-item" data-name="<?php echo htmlspecialchars(strtolower($prod['prodName'])); ?>">
                                                <input type="checkbox" class="custom-control-input product-checkbox" id="prodCheck<?php echo $prod['prodID']; ?>" value="<?php echo $prod['prodID']; ?>" <?php echo $isChecked; ?>>
                                                <label class="custom-control-label font-weight-normal text-dark" for="prodCheck<?php echo $prod['prodID']; ?>">
                                                    <?php echo htmlspecialchars($prod['prodName']); ?>
                                                </label>
                                            </div>
                                        <?php 
                                            endwhile;
                                        else:
                                        ?>
                                            <p class="text-muted text-center m-0">No active products found.</p>
                                        <?php endif; ?>
                                    </div>
                                    <button type="button" id="saveRelatedProducts" class="btn btn-primary btn-block mt-3 py-2">
                                        <i class="fas fa-save mr-2"></i>Save Related Products
                                    </button>
                                </div>
                            </div>
                        </div>

<div class="col-lg-7">
                            <div class="card shadow mb-4">
                                <div class="card-header py-3">
                                    <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-stream mr-2"></i>Report Structure / Sections</h6>
                                </div>
                                <div class="card-body" id="sectionsContainer">
                                    <?php if ($detailsQuery && $detailsQuery->num_rows > 0): ?>
                                        <?php while ($section = $detailsQuery->fetch_assoc()): ?>
                                            <div class="card mb-3 section-card" data-id="<?php echo $section['id']; ?>">
                                                <div class="card-body">
                                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                                        <h5 class="h6 font-weight-bold text-dark mb-0">
                                                            <span class="badge badge-secondary mr-2">Order #<?php echo $section['section_order']; ?></span>
                                                            <?php echo htmlspecialchars($section['title'] ?: '(No Title)'); ?>
                                                        </h5>
                                                        <div>
                                                            <button class="btn btn-warning btn-sm btn-circle edit-btn" data-toggle="modal" data-target="#editSectionModal<?php echo $section['id']; ?>" title="Edit">
                                                                <i class="fas fa-edit"></i>
                                                            </button>
                                                            <button class="btn btn-danger btn-sm btn-circle delete-btn" data-id="<?php echo $section['id']; ?>" title="Delete">
                                                                <i class="fas fa-trash"></i>
                                                            </button>
                                                        </div>
                                                    </div>

<div class="row align-items-center">
                                                        <?php if ($section['image_path']): ?>
                                                            <div class="col-sm-3 text-center">
                                                                <img src="../<?php echo $section['image_path']; ?>" alt="Section image" class="img-fluid rounded" style="max-height: 80px; object-fit: cover;">
                                                            </div>
                                                        <?php endif; ?>
                                                        <div class="<?php echo $section['image_path'] ? 'col-sm-9' : 'col-sm-12'; ?>">
                                                            <p class="small text-muted mb-1">Layout: <strong><?php echo htmlspecialchars($section['layout_type']); ?></strong></p>
                                                            <p class="small text-dark mb-0"><?php echo nl2br(htmlspecialchars($section['content'])); ?></p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

<div class="modal fade" id="editSectionModal<?php echo $section['id']; ?>" tabindex="-1" role="dialog" aria-hidden="true">
                                                <div class="modal-dialog modal-lg" role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title font-weight-bold text-primary"><i class="fas fa-edit mr-2"></i>Edit Section</h5>
                                                            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                                                                <span aria-hidden="true">×</span>
                                                            </button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <form class="editSectionForm" data-id="<?php echo $section['id']; ?>" enctype="multipart/form-data">
                                                                <input type="hidden" name="id" value="<?php echo $section['id']; ?>">
                                                                
                                                                <div class="form-group">
                                                                    <label class="font-weight-bold text-dark">Section Title / Topic</label>
                                                                    <input type="text" class="form-control" name="title" value="<?php echo htmlspecialchars($section['title']); ?>">
                                                                </div>

<div class="form-group">
                                                                    <label class="font-weight-bold text-dark">Layout Presentation Style</label>
                                                                    <select class="form-control" name="layout_type">
                                                                        <option value="image_left" <?php echo $section['layout_type'] == 'image_left' ? 'selected' : ''; ?>>Image on Left, Text on Right</option>
                                                                        <option value="image_right" <?php echo $section['layout_type'] == 'image_right' ? 'selected' : ''; ?>>Text on Left, Image on Right</option>
                                                                        <option value="full_width" <?php echo $section['layout_type'] == 'full_width' ? 'selected' : ''; ?>>Full Width Image (Content below)</option>
                                                                        <option value="text_only" <?php echo $section['layout_type'] == 'text_only' ? 'selected' : ''; ?>>Text Only (No image)</option>
                                                                    </select>
                                                                </div>

<div class="form-group">
                                                                    <label class="font-weight-bold text-dark">Section Image</label>
                                                                    <div class="upload-zone" id="editUploadZone<?php echo $section['id']; ?>">
                                                                        <input type="file" class="editFileInput" name="newImageFile" data-id="<?php echo $section['id']; ?>" accept="image/*" onchange="handleEditFileSelect(event, <?php echo $section['id']; ?>)">
                                                                        <i class="fas fa-cloud-upload-alt upload-icon" style="font-size:2rem;"></i>
                                                                        <div class="upload-text">ลากไฟล์รูปภาพมาแทนที่ หรือคลิกเพื่อเลือก</div>
                                                                    </div>

<div class="image-preview-container" id="editPreviewContainer<?php echo $section['id']; ?>">
                                                                        <img src="" alt="Preview" class="image-preview" id="editPreview<?php echo $section['id']; ?>">
                                                                        <div class="preview-actions">
                                                                            <button type="button" class="btn btn-info btn-sm" onclick="openEditCropper(<?php echo $section['id']; ?>)">
                                                                                <i class="fas fa-crop-alt"></i> ครอปรูป
                                                                            </button>
                                                                            <button type="button" class="btn btn-secondary btn-sm" onclick="removeEditImage(<?php echo $section['id']; ?>)">
                                                                                <i class="fas fa-trash"></i> ยกเลิกภาพใหม่
                                                                            </button>
                                                                        </div>
                                                                    </div>
                                                                </div>

<div class="form-group">
                                                                    <label class="font-weight-bold text-dark">Description Content (อธิบายรายละเอียด)</label>
                                                                    <textarea class="form-control" name="content" rows="6"><?php echo htmlspecialchars($section['content']); ?></textarea>
                                                                </div>

<button type="submit" class="btn btn-primary btn-block py-2">
                                                                    <i class="fas fa-save mr-2"></i>Update Section
                                                                </button>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        <?php endwhile; ?>
                                    <?php else: ?>
                                        <div class="text-center py-5">
                                            <i class="fas fa-file-invoice fa-3x text-gray-300 mb-3"></i>
                                            <p class="text-gray-500 m-0">No report sections created yet. Add your first section on the left!</p>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

<?php include("footer.php"); ?>
        </div>
    </div>

<div class="cropper-modal" id="cropperModal">
        <div class="cropper-container">
            <h5 class="text-center mb-3 font-weight-bold text-primary">ครอปรูปภาพเซกชัน</h5>
            <div class="cropper-wrapper">
                <img id="cropperImage" src="" alt="Crop Image">
            </div>
            <div class="cropper-actions">
                <button type="button" class="btn btn-secondary" onclick="closeCropper()">
                    <i class="fas fa-times"></i> ยกเลิก
                </button>
                <button type="button" class="btn btn-info" onclick="rotateCrop(-90)">
                    <i class="fas fa-undo"></i> หมุนซ้าย
                </button>
                <button type="button" class="btn btn-info" onclick="rotateCrop(90)">
                    <i class="fas fa-redo"></i> หมุนขวา
                </button>
                <button type="button" class="btn btn-primary" onclick="applyCrop()">
                    <i class="fas fa-check"></i> ยืนยันการครอป
                </button>
            </div>
        </div>
    </div>

$(document).ready(function() {
            setupDragDrop('add');
            
            // Drag-drop events for all dynamic edit fields
            $('.editFileInput').each(function() {
                var sectionId = $(this).data('id');
                setupDragDrop('edit' + sectionId);
            });

// Product live filter search
            $('#productSearch').on('keyup', function() {
                var query = $(this).val().toLowerCase();
                $('#productListContainer .product-item').each(function() {
                    var name = $(this).data('name') || '';
                    if (name.indexOf(query) !== -1) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
            });

// AJAX Save related products
            $('#saveRelatedProducts').on('click', function() {
                var checkedIds = [];
                $('.product-checkbox:checked').each(function() {
                    checkedIds.push($(this).val());
                });

var btn = $(this);
                btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-2"></i>Saving...');

$.ajax({
                    url: 'ajax_solution_details_manager.php?act=save_related_products',
                    type: 'POST',
                    data: {
                        solution_id: <?php echo $solution_id; ?>,
                        product_ids: checkedIds
                    },
                    dataType: 'json',
                    success: function(res) {
                        location.reload();
                    },
                    error: function() {
                        location.reload();
                    }
                });
            });

// Add section handler
            $('#addSectionForm').on('submit', function(e) {
                e.preventDefault();
                var formData = new FormData(this);
                
                // If a cropped file exists, append it
                if (croppedBlob) {
                    formData.delete('imageFile');
                    formData.append('imageFile', croppedBlob, 'cropped-image.png');
                } else if (currentFile) {
                    formData.delete('imageFile');
                    formData.append('imageFile', currentFile);
                }
                
                $.ajax({
                    url: 'ajax_solution_details_manager.php?act=add_section',
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    success: function(res) {
                        location.reload();
                    },
                    error: function() {
                        location.reload();
                    }
                });
            });

// Edit section handler
            $('.editSectionForm').on('submit', function(e) {
                e.preventDefault();
                var sectionId = $(this).data('id');
                var formData = new FormData(this);
                
                // Append edited cropped blob if exists
                if (editCroppedBlobs[sectionId]) {
                    formData.delete('newImageFile');
                    formData.append('newImageFile', editCroppedBlobs[sectionId], 'cropped-edit-image.png');
                }
                
                $.ajax({
                    url: 'ajax_solution_details_manager.php?act=edit_section',
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    success: function(res) {
                        location.reload();
                    },
                    error: function() {
                        location.reload();
                    }
                });
            });

// Delete section handler
            $('.delete-btn').on('click', function() {
                var id = $(this).data('id');
                if (confirm('Are you sure you want to delete this report section?')) {
                    $.ajax({
                        url: 'ajax_solution_details_manager.php?act=delete_section',
                        type: 'POST',
                        data: { id: id },
                        dataType: 'json',
                        success: function(res) {
                            location.reload();
                        },
                        error: function() {
                            location.reload();
                        }
                    });
                }
            });
        });

// Setup Drag & Drop
        function setupDragDrop(prefixId) {
            var zone = document.getElementById(prefixId + 'UploadZone');
            var input = zone ? zone.querySelector('input[type="file"]') : null;
            if (!zone || !input) return;

zone.addEventListener('dragover', function(e) {
                e.preventDefault();
                zone.classList.add('dragover');
            });
            zone.addEventListener('dragleave', function(e) {
                e.preventDefault();
                zone.classList.remove('dragover');
            });
            zone.addEventListener('drop', function(e) {
                e.preventDefault();
                zone.classList.remove('dragover');
                if (e.dataTransfer.files.length > 0) {
                    input.files = e.dataTransfer.files;
                    if (prefixId === 'add') {
                        handleFileSelect({ target: input }, 'add');
                    } else {
                        var id = prefixId.replace('edit', '');
                        handleEditFileSelect({ target: input }, id);
                    }
                }
            });

// Input select trigger
            input.addEventListener('change', function(e) {
                if (prefixId === 'add') {
                    handleFileSelect(e, 'add');
                }
            });
        }

// Add file select
        function handleFileSelect(event, type) {
            var file = event.target.files[0];
            if (!file) return;
            currentFile = file;
            currentType = 'add';

var reader = new FileReader();
            reader.onload = function(e) {
                $('#addPreview').attr('src', e.target.result);
                $('#addPreviewContainer').addClass('active');
                $('#addUploadZone').hide();

var img = new Image();
                img.onload = function() {
                    $('#addDimensions').text(img.width + 'x' + img.height);
                };
                img.src = e.target.result;
                $('#addFileSize').text(formatFileSize(file.size));
                $('#addFileInfo').addClass('active');
            };
            reader.readAsDataURL(file);
        }

// Edit file select
        function handleEditFileSelect(event, sectionId) {
            var file = event.target.files[0];
            if (!file) return;
            currentType = sectionId;

var reader = new FileReader();
            reader.onload = function(e) {
                $('#editPreview' + sectionId).attr('src', e.target.result);
                $('#editPreviewContainer' + sectionId).addClass('active');
                $('#editUploadZone' + sectionId).hide();
            };
            reader.readAsDataURL(file);
        }

// Remove add image preview
        function removeImage(type) {
            $('#addPreview').attr('src', '');
            $('#addPreviewContainer').removeClass('active');
            $('#addUploadZone').show();
            $('#addFileInput').val('');
            $('#addFileInfo').removeClass('active');
            currentFile = null;
            croppedBlob = null;
        }

// Remove edit image preview
        function removeEditImage(sectionId) {
            $('#editPreview' + sectionId).attr('src', '');
            $('#editPreviewContainer' + sectionId).removeClass('active');
            $('#editUploadZone' + sectionId).show();
            $('#editUploadZone' + sectionId + ' input').val('');
            delete editCroppedBlobs[sectionId];
        }

// Format file size helper
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            var k = 1024;
            var sizes = ['Bytes', 'KB', 'MB', 'GB'];
            var i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }

// Open cropper modal for Add
        function openCropper(type) {
            currentType = type;
            var imgSource = $('#addPreview').attr('src');
            $('#cropperImage').attr('src', imgSource);
            $('#cropperModal').addClass('active');

if (cropper) cropper.destroy();
            cropper = new Cropper(document.getElementById('cropperImage'), {
                viewMode: 1,
                autoCropArea: 0.8,
                responsive: true
            });
        }

// Open cropper modal for Edit
        function openEditCropper(sectionId) {
            currentType = sectionId;
            var imgSource = $('#editPreview' + sectionId).attr('src');
            $('#cropperImage').attr('src', imgSource);
            $('#cropperModal').addClass('active');

function closeCropper() {
            $('#cropperModal').removeClass('active');
            if (cropper) {
                cropper.destroy();
                cropper = null;
            }
        }

function rotateCrop(degree) {
            if (cropper) cropper.rotate(degree);
        }

function applyCrop() {
            if (!cropper) return;
            var canvas = cropper.getCroppedCanvas({
                imageSmoothingEnabled: true,
                imageSmoothingQuality: 'high'
            });

canvas.toBlob(function(blob) {
                if (currentType === 'add') {
                    croppedBlob = blob;
                    $('#addPreview').attr('src', canvas.toDataURL('image/png'));
                } else {
                    editCroppedBlobs[currentType] = blob;
                    $('#editPreview' + currentType).attr('src', canvas.toDataURL('image/png'));
                }
                closeCropper();
            }, 'image/png');
        }
    </script>
</body>
</html>
<?php }else{ header("Location: login.php");} ?>

Batal

⬅ Naik ke public_html 148 item

Nama	Tipe	Ukuran	Diubah	Aksi
📁bootstrap	dir	—	2026-05-19 07:20	📂 Buka
📁css	dir	—	2026-05-19 07:20	📂 Buka
📁file export	dir	—	2026-05-19 07:20	📂 Buka
📁fileupload	dir	—	2026-05-19 07:20	📂 Buka
📁img	dir	—	2026-05-19 07:20	📂 Buka
📁js	dir	—	2026-05-19 07:20	📂 Buka
📁scss	dir	—	2026-05-19 07:20	📂 Buka
📁upload	dir	—	2026-05-19 07:20	📂 Buka
📁vendor	dir	—	2026-05-19 07:20	📂 Buka
📝README.md	md	4.1 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🖼️S11157507.jpg	jpg	208.4 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🖼️Solarcell.png	png	378.5 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘about_us_manager.php	php	16.4 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘actionuser.php	php	2.5 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘add_file_db.php	php	4.6 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘ajax_solution_details_manager.php	php	8.9 KB	2026-06-05 12:22	✏️ Edit 👁️ View
🐘ajax_solution_manager.php	php	8.3 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘ajaxfile.php	php	510 B	2026-06-03 06:33	✏️ Edit 👁️ View
🐘alertnoti.php	php	2.4 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘byProductDetail.php	php	4.6 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🖼️c-01-1(1).png	png	18.2 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🖼️c-01.png	png	141.6 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘check_conn.php	php	1004 B	2026-06-04 10:50	✏️ Edit 👁️ View
🐘check_delete_status.php	php	2.8 KB	2026-06-04 11:04	✏️ Edit 👁️ View
🐘check_footer_db.php	php	9.3 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘check_footer_qr_path.php	php	1.9 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘check_gallery_db.php	php	3 KB	2026-06-04 10:50	✏️ Edit 👁️ View
🐘check_gd.php	php	751 B	2026-06-03 06:33	✏️ Edit 👁️ View
🐘check_home_portfolio_table.php	php	4.4 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘check_oth_img_structure.php	php	3.1 KB	2026-06-03 06:44	✏️ Edit 👁️ View
🐘check_portfolio_gallery.php	php	4.5 KB	2026-06-04 10:50	✏️ Edit 👁️ View
🐘check_portfolio_query.php	php	2.9 KB	2026-06-03 06:43	✏️ Edit 👁️ View
🐘check_portfolio_table.php	php	2.7 KB	2026-06-03 06:58	✏️ Edit 👁️ View
🐘cleanup_duplicates.php	php	1.1 KB	2026-06-04 10:50	✏️ Edit 👁️ View
🐘conn.php	php	1 KB	2026-06-05 12:22	✏️ Edit 👁️ View
🐘contact_manager.php	php	43.2 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘debug_gallery_direct.php	php	2.5 KB	2026-06-04 10:50	✏️ Edit 👁️ View
🐘debug_server.php	php	3.3 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘delete_gallery_image.php	php	1.3 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🖼️des-iooi.png	png	183.3 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🖼️des_NEON.jpg	jpg	4.1 MB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘device.php	php	14.5 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘devicetoscene.php	php	9.9 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘devicetosceneedit.php	php	8.8 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘diagnose_production.php	php	5.9 KB	2026-06-04 11:08	✏️ Edit 👁️ View
📝error_log.txt	txt	13.2 KB	2026-06-05 07:15	✏️ Edit 👁️ View
🐘execute_gallery_insert.php	php	2.2 KB	2026-06-04 10:50	✏️ Edit 👁️ View
🐘fix_auto_increment.php	php	1.3 KB	2026-06-04 10:50	✏️ Edit 👁️ View
🐘fix_db_connection.php	php	1.4 KB	2026-06-04 10:50	✏️ Edit 👁️ View
🐘fix_footer_paths.php	php	1.7 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘fix_gallery_insert.php	php	1.9 KB	2026-06-04 10:50	✏️ Edit 👁️ View
🐘fix_portfoliodetail_table.php	php	3.2 KB	2026-06-04 10:50	✏️ Edit 👁️ View
🐘fix_qr_path.php	php	796 B	2026-06-03 06:33	✏️ Edit 👁️ View
🐘fix_qr_path_v2.php	php	2.3 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘floating_widget.php	php	19.6 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🖼️footer-qr.png	png	6.9 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘footer.php	php	258 B	2026-06-03 06:33	✏️ Edit 👁️ View
🐘footer_manager.php	php	44.1 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘force_db_insert.php	php	2.1 KB	2026-06-04 10:50	✏️ Edit 👁️ View
🐘function.php	php	947 B	2026-06-03 06:33	✏️ Edit 👁️ View
📝gallery_debug_output.txt	txt	2.6 KB	2026-06-04 10:50	✏️ Edit 👁️ View
🐘get_gallery_image.php	php	712 B	2026-06-03 06:33	✏️ Edit 👁️ View
📜gulpfile.js	js	3.7 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘home_portfolio_section.php	php	87 KB	2026-06-03 06:45	✏️ Edit 👁️ View
🐘home_product_section.php	php	69.2 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘home_solution_section.php	php	70.5 KB	2026-06-05 12:22	✏️ Edit 👁️ View
🐘homepage.php	php	59.2 KB	2026-06-03 06:33	✏️ Edit 👁️ View
📕i-INL-418.pdf	pdf	1.2 MB	2026-06-03 06:33	✏️ Edit 👁️ View
🖼️i-INL-418.png	png	152.3 KB	2026-06-03 06:33	✏️ Edit 👁️ View
📕i-INL-419.pdf	pdf	1.3 MB	2026-06-03 06:33	✏️ Edit 👁️ View
🖼️i-INL-419.png	png	174.2 KB	2026-06-03 06:33	✏️ Edit 👁️ View
📕i-INL-420.pdf	pdf	1.1 MB	2026-06-03 06:33	✏️ Edit 👁️ View
🖼️i-INL-420.png	png	196.2 KB	2026-06-03 06:33	✏️ Edit 👁️ View
📕i-INL-421.pdf	pdf	1.3 MB	2026-06-03 06:33	✏️ Edit 👁️ View
🖼️i-INL-421.png	png	220.9 KB	2026-06-03 06:33	✏️ Edit 👁️ View
📕i-INL-422.pdf	pdf	1.3 MB	2026-06-03 06:33	✏️ Edit 👁️ View
🖼️i-INL-422.png	png	209 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🖼️i-SVG+AHF.png	png	237.1 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🖼️i-SVG-AHF.png	png	237.1 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🖼️images.jpg	jpg	15.3 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘importdata.php	php	497 B	2026-06-03 06:33	✏️ Edit 👁️ View
🖼️index-3.png	png	638.2 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘index.php	php	14 KB	2026-06-04 11:04	✏️ Edit 👁️ View
🗃️insert_gallery_direct.sql	sql	1.7 KB	2026-06-04 10:50	✏️ Edit 👁️ View
📜jquery-3.1.1.min.js	js	84.7 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘lastupdate.php	php	9.5 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘loaddevice.php	php	558 B	2026-06-03 06:33	✏️ Edit 👁️ View
🐘login.php	php	2.7 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘logout.php	php	86 B	2026-06-03 06:33	✏️ Edit 👁️ View
🐘manage_solution_details.php	php	40.6 KB	2026-06-05 12:22	✏️ Edit 👁️ View
🐘manageportfoliocategories.php	php	12.8 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘manageportfoliogallery.php	php	25.9 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘manual_gallery_insert.php	php	2.6 KB	2026-06-04 10:50	✏️ Edit 👁️ View
📝manual_insert_log.txt	txt	2.9 KB	2026-06-04 10:50	✏️ Edit 👁️ View
🐘menu.php	php	6.3 KB	2026-06-04 11:04	✏️ Edit 👁️ View
🐘navigation_menu.php	php	33 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘pdpa_manager.php	php	23.6 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘php.php	php	531 B	2026-06-03 06:33	✏️ Edit 👁️ View
🐘portfolio_admin_dashboard.php	php	21.1 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🗃️pro_stl.sql	sql	8.4 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘product_categories.php	php	23.7 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘reset_admin.php	php	1.6 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘reset_home_product_section.php	php	2.9 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘save_floating_widget.php	php	2.2 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘save_footer.php	php	7.5 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘save_gallery_image.php	php	3.2 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘save_home_portfolio_section.php	php	12.6 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘save_home_product_section.php	php	11.7 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘save_home_solution_section.php	php	12.3 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘save_homepage.php	php	14.3 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘save_navigation_menu.php	php	7.1 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘save_solution_page.php	php	19.9 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘savedata.php	php	3.7 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘scene.php	php	8 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘schedule.php	php	9.5 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘settingalert.php	php	14 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘solution_page.php	php	37.6 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘test_delete_function.php	php	1.9 KB	2026-06-04 11:04	✏️ Edit 👁️ View
🐘test_insert.php	php	911 B	2026-06-04 10:50	✏️ Edit 👁️ View
🐘test_portfolio_page.php	php	3.7 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘test_session.php	php	1.3 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘test_upload.php	php	2.9 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘test_write.php	php	1.4 KB	2026-06-03 06:33	✏️ Edit 👁️ View
📋testdata.json	json	513 B	2026-06-03 06:33	✏️ Edit 👁️ View
📋testjson.json	json	1.2 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘themes.php	php	25.5 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘updata.php	php	64 KB	2026-06-05 12:22	✏️ Edit 👁️ View
🐘update_category_link.php	php	2.7 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘update_gallery_image.php	php	1.7 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘upload.php	php	1.5 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘upload_category_image.php	php	4.8 KB	2026-06-03 06:33	✏️ Edit 👁️ View
📋upload_debug.log	log	77.8 KB	2026-06-05 04:18	✏️ Edit 👁️ View
🐘upload_floating_image.php	php	3.2 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘upload_footer_image.php	php	6.8 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘uploadall.php	php	15.9 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘uploadcatalogue.php	php	25.7 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘uploadfile.php	php	2.5 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘uploadimg.php	php	31.5 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘uploadindex.php	php	15.3 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘uploadmainmenu.php	php	17.1 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘uploadmenu.php	php	12.9 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘uploadportfolio.php	php	45 KB	2026-06-03 06:58	✏️ Edit 👁️ View
🐘uploadsolution.php	php	44.9 KB	2026-06-05 12:22	✏️ Edit 👁️ View
🐘uploadsubmenu.php	php	16 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘usageerport.php	php	9.5 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘usagepower.php	php	9.5 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘user.php	php	17.1 KB	2026-06-03 06:33	✏️ Edit 👁️ View
🐘useract.php	php	1.1 KB	2026-06-04 11:04	✏️ Edit 👁️ View