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

if (isset($_SESSION['user_role']) && $_SESSION['user_role'] == 'user') {
    echo "<script>window.location.href='index.php'</script>";
    exit;
}

$id = $_GET['id'] ?? 0;

/* FETCH MATERIAL */
$res = mysqli_query($conn, "SELECT * FROM stone_materials WHERE id='$id'");
$mat = mysqli_fetch_assoc($res);

if(!$mat){
    echo "<script>window.location.href='manage_materials.php'</script>";
    exit;
}
?>

<div class="card shadow mb-4">
    <div class="card-header">
        <h5>Edit Material (Global)</h5>
    </div>

    <div class="card-body">

        <form id="materialForm">

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

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

                <div class="col-md-6">
                    <label>Slug</label>
                    <input type="text" name="slug" id="matSlug"
                        class="form-control"
                        value="<?= htmlspecialchars($mat['slug']) ?>">
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-md-6">
                    <label>Type</label>
                    <select name="type" class="form-control">
                        <option value="sqft" <?= $mat['type']=='sqft'?'selected':'' ?>>SQFT</option>
                        <option value="lnft" <?= $mat['type']=='lnft'?'selected':'' ?>>LNFT</option>
                    </select>
                </div>

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

            <button class="btn btn-primary mt-3">Update Material</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: "2500"
};

$(document).ready(function(){

    /* AUTO SLUG */
    $('#matName').on('input', function () {
        let slug = $(this).val()
            .toLowerCase()
            .replace(/[^a-z0-9]+/g, '-')
            .replace(/(^-|-$)/g, '');

        $('#matSlug').val(slug);
    });


    /* UPDATE */
    $('#materialForm').submit(function(e){
        e.preventDefault();

        $.ajax({
            url: 'api/update_material.php',
            type: 'POST',
            data: $(this).serialize(),
            dataType: 'json',
            success: function(res){

                if(res.status === 'success'){
                    toastr.success(res.message);
                     setTimeout(() => {
                        window.location.href = 'show-stone_material.php';
                    }, 1500);

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

            },
            error: function(xhr){
                console.log(xhr.responseText);
                toastr.error('Server error');
            }
        });

    });

});
</script>