bnmbnmbnhjkhjkhjkhjktyutyutyuytutyutyutyhgjgjghjgjghjguytutyry

halohalo bnmbnmbnhjkhjkhjkhjktyutyutyuytutyutyutyhgjgjghjgjghjguytutyry

<?php
session_start();
if (!isset($_SESSION['user_id'])) {
    header("Location: login.php");
    exit();
}
include('inc/header.php');
?>
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<style>
    .swal2-container {
        z-index: 99999 !important;
    }

.offcanvas {
        width: 800px !important;
    }
</style>

<div class="content-wrapper">
    
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="app-ecommerce-sizechart">

<div class="card">
                
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">sizechart List</h5>
                    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas"
                        data-bs-target="#offcanvasEcommercesizechartList"
                        aria-controls="offcanvasEcommercesizechartList">
                        + Add sizechart
                    </button>
                </div>

<thead>
                            <tr>
                                <th>ID</th>
                                <th>Title</th>
                                <th>size</th>
                                <th>Image</th>
                                <th>Status</th>
                                <th>Actions</th>

</tr>
                        </thead>
                        <tbody>
                            <?php
                            include("config.php");

$res = mysqli_query($conn, "SELECT * FROM sizechart ORDER BY id DESC");

while ($row = mysqli_fetch_assoc($res)) {

// Decode structured JSON
                                $sizeData = json_decode($row['size'], true);

$columnBadges = '';

if (
                                    is_array($sizeData) &&
                                    isset($sizeData['columns']) &&
                                    is_array($sizeData['columns'])
                                ) {
                                    foreach ($sizeData['columns'] as $col) {
                                        $columnBadges .= "<span class='badge bg-primary me-1'>"
                                            . htmlspecialchars($col) .
                                            "</span>";
                                    }
                                } else {
                                    $columnBadges = "<span class='text-muted'>Invalid data</span>";
                                }

?>
                                <tr>
                                    <td><?= $row['id']; ?></td>

<td><?= $columnBadges; ?></td>

<td>
                                        <?php if (!empty($row['image'])): ?>
                                            <img src="uploads/<?= htmlspecialchars($row['image']); ?>" width="50">
                                        <?php else: ?>
                                            <span class="text-muted">No Image</span>
                                        <?php endif; ?>
                                    </td>

<td>
                                        <?php if ($row['status'] == 1): ?>
                                            <button class="btn btn-success btn-sm status-btn" data-id="<?= $row['id']; ?>"
                                                data-status="0">
                                                Active
                                            </button>
                                        <?php else: ?>
                                            <button class="btn btn-danger btn-sm status-btn" data-id="<?= $row['id']; ?>"
                                                data-status="1">
                                                Inactive
                                            </button>
                                        <?php endif; ?>
                                    </td>

<td>
                                        <div class="dropdown">
                                            <button type="button" class="btn p-0 dropdown-toggle" data-bs-toggle="dropdown">
                                                <i class="bx bx-dots-vertical-rounded"></i>
                                            </button>
                                            <div class="dropdown-menu">

<a class="dropdown-item edit-btn" href="javascript:void(0);"
                                                    data-id="<?= $row['id']; ?>"
                                                    data-title="<?= htmlspecialchars($row['title'], ENT_QUOTES); ?>"
                                                    data-size='<?= htmlspecialchars($row["size"], ENT_QUOTES); ?>'
                                                    data-image="uploads/<?= htmlspecialchars($row['image']); ?>">
                                                    <i class="bx bx-edit-alt me-1"></i> Edit
                                                </a>

<a class="dropdown-item delete-btn" href="javascript:void(0);"
                                                    data-id="<?= $row['id']; ?>">
                                                    <i class="bx bx-trash me-1"></i> Delete
                                                </a>

</div>
                                        </div>
                                    </td>
                                </tr>
                            <?php } ?>
                        </tbody>

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

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEcommercesizechartList"
                aria-labelledby="offcanvasEcommercesizechartListLabel">
                
                <div class="offcanvas-header py-6">
                    <h5 id="offcanvasEcommercesizechartListLabel" class="offcanvas-title">Add sizechart</h5>
                    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
                        aria-label="Close"></button>
                </div>
                
                <div class="offcanvas-body border-top">
                    
                    <form id="sizechartForm" enctype="multipart/form-data">

<input type="hidden" name="id" id="sizechart_id" value="0">
                        <input type="hidden" name="column_count" id="column_count" value="3">
                        <div class="mb-3">
                            <label class="fw-bold">Sizechart Title</label>
                            <input type="text" class="form-control" name="sizechartname" required>
                        </div>

<div id="titleRows">
                            <label class="fw-bold">Size Chart</label>

<button type="button" id="addColumn" class="btn btn-sm btn-primary mb-2">
                                + Add Column
                            </button>

<div class="title-row d-flex gap-2 mb-2">
                                <input class="form-control" name="size[]" value="Size" readonly>
                                <input class="form-control" name="size[]" value="Width" readonly>
                                <input class="form-control" name="size[]" value="Length" readonly>

<div class="mb-3">
                            <label class="fw-bold">Image</label>
                            <input type="file" class="form-control" name="sizechartImage">
                        </div>

</div>
            </div>

</div>
    </div>

<?php
    include('inc/footer.php');
    ?>
    
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

/* ===============================
   ADD EXTRA COLUMN
================================ */
$('#addColumn').on('click', function () {
    let name = prompt('Enter column name (eg: Sleeve, Silver)');
    if (!name) return;

name = name.trim();
    if (name === '') return;

// prevent duplicate column
    if (extraColumns.includes(name)) {
        alert('This column already exists');
        return;
    }

extraColumns.push(name);
    $('#extra_columns').val(JSON.stringify(extraColumns));

// add input to all existing rows
    $('.title-row').each(function () {
        $('<input>', {
            type: 'text',
            class: 'form-control',
            name: 'size[]',
            placeholder: name
        }).insertBefore($(this).find('.add-row'));
    });
});

/* ===============================
   ADD NEW ROW
================================ */
$(document).on('click', '.add-row', function () {
    let colCount = $('.title-row:first input').length;

let row = `<div class="title-row d-flex gap-2 mb-2 align-items-center">`;

for (let i = 0; i < colCount; i++) {
        row += `<input class="form-control" name="size[]" placeholder="Value">`;
    }

row += `
        <button type="button" class="btn btn-danger remove-row">−</button>
    </div>`;

$('#titleRows').append(row);
});

/* ===============================
   REMOVE ROW
================================ */
$(document).on('click', '.remove-row', function () {
    $(this).closest('.title-row').remove();
});

/* ===============================
   FORM SUBMIT (AJAX)
================================ */
$('#sizechartForm').on('submit', function (e) {
    e.preventDefault();

// store extra columns before submit
    $('#extra_columns').val(JSON.stringify(extraColumns));

let formData = new FormData(this);

Swal.fire({
        title: 'Saving...',
        allowOutsideClick: false,
        showConfirmButton: false,
        didOpen: () => Swal.showLoading()
    });

$.ajax({
        url: 'insert/sizechart.php',
        type: 'POST',
        data: formData,
        contentType: false,
        processData: false,
        success: function (res) {
            let r = typeof res === 'string' ? JSON.parse(res) : res;

Swal.fire({
                icon: r.success ? 'success' : 'error',
                title: r.message
            });

if (r.success) {
                setTimeout(() => location.reload(), 800);
            }
        },
        error: function () {
            Swal.fire('Error', 'Server error occurred', 'error');
        }
    });
});

/* ===============================
   EDIT BUTTON (LOAD DATA)
================================ */
$(document).on('click', '.edit-btn', function () {

let id    = $(this).data('id');
    let title = $(this).data('title');
    let data  = JSON.parse($(this).attr('data-size'));
    let image = $(this).data('image');

$('#sizechart_id').val(id);
    $('input[name="sizechartname"]').val(title);

// reset
    $('#titleRows').html('');
    extraColumns = [];

// columns
    let columns = data.columns;
    let rows    = data.rows;

// fixed columns = first 3
    let fixedCols = columns.slice(0, 3);
    extraColumns  = columns.slice(3);

$('#extra_columns').val(JSON.stringify(extraColumns));

// header row (readonly)
    let headerRow = `<div class="title-row d-flex gap-2 mb-2 align-items-center">`;
    fixedCols.forEach(col => {
        headerRow += `<input class="form-control" value="${col}" readonly>`;
    });
    extraColumns.forEach(col => {
        headerRow += `<input class="form-control" value="${col}" readonly>`;
    });

headerRow += `
        <button type="button" class="btn btn-success add-row">+</button>
        <button type="button" class="btn btn-danger remove-row" style="display:none;">−</button>
    </div>`;

$('#titleRows').append(headerRow);

// data rows
    rows.forEach(rowData => {
        let row = `<div class="title-row d-flex gap-2 mb-2 align-items-center">`;
        rowData.forEach(val => {
            row += `<input class="form-control" name="size[]" value="${val}">`;
        });
        row += `<button type="button" class="btn btn-danger remove-row">−</button></div>`;
        $('#titleRows').append(row);
    });

// preview image
    if (image) {
        $('#previewImage').attr('src', image).show();
    }

new bootstrap.Offcanvas('#offcanvasEcommercesizechartList').show();
});
</script>

$(document).on('click', '.status-btn', function () {
            const id = $(this).data('id');
            const newStatus = $(this).data('status');
            updateStatus(id, newStatus);
        });

$(document).ready(function () {
            $('#sizechartTable').DataTable({
                responsive: true,
                autoWidth: false
            });

$('#sizechartForm').on('submit', function (e) {
                e.preventDefault();
                const formData = new FormData(this);
                submitForm(formData);
            });

// Edit button
    //         $(document).on('click', '.edit-btn', function () {

//             $('#sizechart_id').val($(this).data('id'));
    //             $('input[name="sizechartname"]').val($(this).data('category'));

//             let titles = JSON.parse($(this).attr('data-title'));
    //             $('#titleRows').html('');

//             titles.forEach((t, i) => {
    //                 $('#titleRows').append(`
    //   <div class="title-row d-flex gap-2 mb-2">
    //     <input type="text" class="form-control" name="size[]" value="${t}">
    //     <button type="button" class="btn btn-success add-row">+</button>
    //     <button type="button" class="btn btn-danger remove-row" ${titles.length === 1 ? 'style="display:none"' : ''}>−</button>
    //   </div>
    // `);
    //             });

//             const img = $(this).data('image');
    //             if (img) $('#previewImage').attr('src', img).show();

//             new bootstrap.Offcanvas('#offcanvasEcommercesizechartList').show();
    //         });

$(document).on('click', '.delete-btn', function () {
                const id = $(this).data('id');
                Swal.fire({
                    title: 'Are you sure?',
                    text: "This will permanently delete the sizechart.",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Yes, delete it!',
                    cancelButtonText: 'Cancel'
                }).then((result) => {
                    if (result.isConfirmed) {
                        deletesizechart(id);
                    }
                });
            });

$(document).on('change', '.status-toggle', function () {
                const id = $(this).data('id');
                const status = $(this).is(':checked') ? 1 : 0;
                updateStatus(id, status);
            });

$('#selectAll').on('click', function () {
                $('.row-checkbox').prop('checked', this.checked);
            });

$('#bulkDeleteBtn').on('click', function () {
                const selected = $('.row-checkbox:checked').map(function () {
                    return $(this).val();
                }).get();
                if (selected.length === 0) {
                    Swal.fire('Warning!', 'Please select at least one sizechart.', 'warning');
                    return;
                }
                Swal.fire({
                    title: 'Are you sure?',
                    text: `This will delete ${selected.length} categories.`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Yes, delete all!',
                    cancelButtonText: 'Cancel'
                }).then((result) => {
                    if (result.isConfirmed) {
                        bulkDeletesizechart(selected);
                    }
                });
            });
        });

function resetForm() {
            $('#sizechartForm')[0].reset();
            $('#sizechart_id').val('');
            $('#previewIcon').hide();
            $('#previewImage').hide();
            $('.modal-title').text('Add Main Services');
        }

function handleResponse(res, successTitle, errorTitle) {
            try {
                console.log("Raw response from server:", res);
                const response = typeof res === 'string' ? JSON.parse(res) : res;

const Toast = Swal.mixin({
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 3000,
                    timerProgressBar: true
                });

Toast.fire({
                    icon: response.success ? 'success' : 'error',
                    title: response.message || (response.success ? successTitle : errorTitle)
                });

if (response.success) {
                    $('#sizechartModal').modal('hide');
                    resetForm();
                    setTimeout(() => location.reload(), 1000);
                }
            } catch (e) {
                console.error("Error parsing response:", e);
                Swal.fire('Error!', 'Unexpected response from server: ' + e.message, 'error');
            }
        }
    </script>