<?php
// if ( !isset($_POST['projectId']) ) {
//     http_response_code(400);
//     echo json_encode('No project ID');
//     exit;
// }

// if ( !isset($_POST['groupId']) ) {
//     http_response_code(400);
//     echo json_encode('No group ID');
//     exit;
// }
?>

<form id="newSelectionItemForm" action="<?php echo URL_APP; ?>/selections/src/new-selection-item.php" method="POST">

    <div id="selectionItemDropzoneContainer" class="mb-2">
        <div id="selectionItemDropzone" class="d-flex justify-content-center align-items-center rounded overflow-x-scroll" style="border:1px grey dashed;min-height:200px;cursor:pointer;">
            <div id="uploadSelectionImage" class="text-center">
                <div class="fw-bold">Add Image</div>
            </div>
        </div>
        <div class="small mt-1 ms-1">
            <span class="text-muted">Drag and drop or click inside the box to upload files</span>
            <br> 
            <span class="text-muted">Max number of files:</span> 1
            <br>
            <span class="text-muted">Max size per file:</span> 30MB
            <br>
            <span class="text-muted">Max total upload size:</span> 30MB 
            <br>
            <span class="text-muted">Accepted file types:</span> JPG/JPEG, PNG
        </div>
    </div>

    <div id="newAutomaticSelectionItemImageContainer" class="mb-2 d-none">
        <div class="d-flex justify-content-between px-2 pb-1">
            <span class="small text-muted">Image</span>
            <button id="removeSelectionItemImageButton" type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-title="Remove image"></button>
        </div>
        <img id="newAutomaticSelectionItemImage" class="img-thumbnail" src="">
    </div>

    <div class="form-floating mb-2">
        <input id="selectionItemTitle" type="text" name="title" class="form-control" required>
        <label for="name">Title</label>
    </div>
    <div class="form-floating mb-2">
        <input id="selectionItemVendor" type="text" name="vendor" class="form-control">
        <label for="name">Vendor</label>
    </div>
    <div class="form-floating mb-2">
        <textarea id="selectionItemDescription" name="description" class="form-control" style="height:200px;"></textarea>
        <label for="description">Description</label>
    </div>
    <div class="form-floating mb-2">
        <input id="selectionItemUnit" type="text" name="unit" class="form-control">
        <label for="unit">Unit</label>
    </div>
    <div class="input-group mb-2">
        <label class="input-group-text"><i class="bi bi-currency-dollar text-success"></i></label>
        <div class="form-floating">
            <input id="selectionItemCost" type="number" name="cost" class="form-control">
            <label for="cost">Cost Per Unit</label>
        </div>
    </div>
    <div class="form-floating mb-2">
        <input id="selectionItemQuantity" type="number" name="quantity" class="form-control">
        <label for="quantity">Quantity</label>
    </div>
    <div class="form-floating mb-2">
        <input id="selectionItemLink" type="text" name="link" class="form-control">
        <label for="link">Link</label>
    </div>
    
    <input id="selectionItemProjectId" type="hidden" name="projectId" value="">
    <input id="selectionItemGroupId" type="hidden" name="groupId" value="">
    <input id="selectionItemImageUrl" type="hidden" name="selectionItemImageUrl" value="">

</form>