<?php
include 'inc/header.php';

$id = (int)($_GET['id'] ?? 0);

$data = mysqli_fetch_assoc(mysqli_query($conn,
    "SELECT * FROM subcategories WHERE id=$id"
));

if(!$data){
    die("Subcategory not found");
}
?>

<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-secondary">Edit Subcategory</h6>
    </div>

    <div class="container my-4">
        <form id="subcategoryForm" enctype="multipart/form-data">

            <input type="hidden" name="id" value="<?= $data['id'] ?>">

            <div class="row mt-3">
                <div class="col-md-6">
                    <label>Main Category</label>
                    <select name="category_id" class="form-control" required>

                        <?php
                        $cats = mysqli_query($conn,"SELECT id,name FROM categories WHERE status='active'");
                        while($c = mysqli_fetch_assoc($cats)){
                            $selected = $c['id']==$data['category_id'] ? 'selected' : '';
                            echo "<option value='{$c['id']}' $selected>{$c['name']}</option>";
                        }
                        ?>
                    </select>
                </div>

                <div class="col-md-6">
                    <label>Subcategory Name</label>
                    <input type="text" name="name"
                           value="<?= htmlspecialchars($data['name']) ?>"
                           class="form-control" required>
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-md-4">
                    <label>Sort Order</label>
                    <input type="number" name="sort_order"
                           value="<?= $data['sort_order'] ?>"
                           class="form-control">
                </div>

                <div class="col-md-4">
                    <label>Status</label>
                    <select name="status" class="form-control">
                        <option value="active" <?= $data['status']=='active'?'selected':'' ?>>Active</option>
                        <option value="inactive" <?= $data['status']=='inactive'?'selected':'' ?>>Inactive</option>
                    </select>
                </div>
            </div>

            <div class="row mt-3">
    <div class="col-md-12">
        <label>Subcategory Image</label>
       <input type="file" name="image" id="imageInput" class="form-control">

<?php 
$img = !empty($data['image']) 
    ? "uploads/subcategories/".$data['image'] 
    : "";
?>

<img id="imagePreview"
     src="<?= $img ?>"
     style="<?= $img ? '' : 'display:none;' ?> margin-top:10px;width:120px;border-radius:6px;">
    </div>
</div>



            <br>
            <button type="submit" class="btn btn-primary">
                Update Subcategory
            </button>
        </form>
    </div>
</div>

<?php include 'inc/footer.php'; ?>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>
     toastr.options = {
        closeButton: true,
        progressBar: true,
        positionClass: "toast-top-right",
        timeOut: "3000"
    };
$('#subcategoryForm').on('submit', function(e){
    e.preventDefault();

    let formData = new FormData(this);

    $.ajax({
        url: 'api/update_subcategory.php',
        type: 'POST',
        data: formData,
        processData:false,
        contentType:false,
        dataType:'json',
        success:function(res){

            if(res.status === 'success'){
                toastr.success(res.message);

                setTimeout(()=>{
                    window.location.href = "show-sub-category.php";
                },1200);

            }else{
                toastr.error(res.message);
            }

        }
    });

});
/* IMAGE PREVIEW */
$('#imageInput').on('change', function(){

    let file = this.files[0];

    if(file){

        let reader = new FileReader();

        reader.onload = function(e){
            $('#imagePreview')
                .attr('src', e.target.result)
                .show();
        }

        reader.readAsDataURL(file);
    }

});
</script>

 
