<style>
.modal2 {
    /*display: none;*/
    position: fixed;
    z-index: 99999;
    left: 0; top: 0;
    width: 100%; height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter:blur(3px);
}

    .modal-content2 {
        background-color: #fff;
        margin: auto;
        padding: 20px;
        border-radius: 8px;
        width: 80%;
        max-width: 500px;
        animation: fadeIn 0.3s;
        margin-top:130px;
    }
    .modal-header{
        padding: 15px;

    }
    .modal-body{
        padding: 15px;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }
    .modal-body p{
        text-align: justify-all;
        font-family: sans-serif;
    }
    .modal-body span{
        font-weight: bold;
        font-size: 16px;
        font-family: sans-serif;
        line-height: 4px;
    }
    .modal-body label{
        padding: 5px;
        background: #f2f2f2;
        font-size: 13px;
    }
    .modal-footer{
        padding-bottom: 10px;
    }

    .modal-header2, .modal-footer2 {
        font-weight: bold;
    }

    .modal-footer2{
        /*border-top: 1px solid #ddd;*/
        display: flex;
        justify-content: space-between;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @media(max-width: 992px){
        .modal-content2{
            width: 90%;
            margin-top:100px;
        }
        .modal-body p{
            font-size: 14px;
        }
        .modal-body span{
            font-size: 14px;
        }
        .modal-footer2{
            display: flex;
            justify-content: space-between;
            gap:20px;
        }
        .modal-footer2 button{
            font-size: 12px;
        }
    }

</style>
<div class="modal2" id="theModal">
    <div class="modal-content2">
        <div class="modal-header">
            <span class="text-danger">Insufficient Stock Alert 
                <i class="fa fa-exclamation-triangle"></i>
            </span>
        </div>
      <div class="modal-body">
        <p>
            You are trying to supply <span>(<?php echo $quantity?>)</span> quantities of <b><?php echo $product;?></b>,
            but only <span>(<?php echo $valQuant;?>)</span> quantity are currently in stock.
            <br><br>
            If you proceed, you will owe the customer <span>(<?php echo $difference;?>)</span> quantity, and only the available stock will be recorded as supplied.
            <br><br>
            Do you still wish to continue with this supply?
        </p>

        <label><b>Note:</b> Any owed quantity will be recorded for follow-up, and should be fulfilled as soon as stock becomes available.</label>
      </div>
      <form action="" method="POST">
        <div class="modal-footer2">
            <input type="hidden" name="price" value="<?php echo $price;?>">
            <input type="hidden" name="quantity" value="<?php echo $quantity;?>">
            <input type="hidden" name="valQuant" value="<?php echo $valQuant;?>">
            <input type="hidden" name="difference" value="<?php echo $difference;?>">
            <input type="hidden" name="product" value="<?php echo $product;?>">
            <input type="hidden" name="mode" value="<?php echo $mode;?>">
            <span class="mt-4">
                <button type="button" class="btn btn-secondary" 
                    onclick="closeModal2()">No, Abort the operation</button>
                <button name="Alert-Btn" class="btn btn-success">Proceed with the available stock.</button>
            </span>
        </div>
      </form> 
    </div>
    

</div>

<?php



?>



<script>
    function closeModal2(){
        document.getElementById('theModal').style.display="none";
    }
</script>


