<?php session_start();?>
<?php include'includes/header.php'; ?>
<?php include'includes/sidebar.php';?>
<?php include'includes/functions.php';?>
<?php include'includes/navbar.php'; ?>

<!-- Handle Add Slider -->
<style>
    td span{
        padding: 10px; border-radius: 6px;
        font-size: 13px;
    }
    .success_stutus{
        background: #E8FCEF; color: #4ECA74;
    }
    .error_status{
        background: #F8D7DA; color: #90151C;
    }
</style>
<?php


?>

<div id="notification-containers" class="notification-containers"></div>
<div class="insider">
    <div class="container">
        <div class="cat-pag">
            <div class="cat-page-header d-flex justify-content-between align-items-center">
                <h5>Unsuccessful Orders</h5>
                <div>
                    <button class="btn btn-success" onclick="openModal('modal-add')">Search <i class="fa fa-search"></i></button>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header text-center">
                    <h5>Pending Orders</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="example" class="display table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th>S/N</th>
                                    <th>Order Id</th>
                                    <th>Product</th>
                                    <th>Date</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody id="loadUsers">
                                <?php
                                $srn = 0;
                                $status = "pending";
                                $orderId = "SELECT DISTINCT order_no, created, status 
                                            FROM order_items 
                                            WHERE status = ?";
                                $stmt = $pdo->prepare($orderId);
                                $stmt->execute([$status]);
                                $count = $stmt->rowCount();
                                while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                                    $orderNo = $row['order_no'];
                                    $created = $row['created'];
                                    $status = $row['status'];
                                    $srn = $srn + 1;
                                    $rmTime = explode(" ", $created);
                                    $NivDate = $rmTime[0];

                                    $kount = "SELECT product_id FROM order_items 
                                            WHERE order_no = ? AND created = ? 
                                            AND status = ? ";
                                    $kountPdo = $pdo->prepare($kount);
                                    $kountPdo->execute([$orderNo, $created, $status]);
                                    $kountProduct = $kountPdo->rowCount();
                                ?>
                                <tr>
                                    <td><?= $srn ?></td>
                                    <td><?= $orderNo; ?></td>
                                    <td><?= $kountProduct; ?></td>
                                    <td><?= $NivDate; ?></td>
                                    <td style="color: #90151C">Waiting</td>
                                    <td>
                                        <form action="" method="POST">
                                            <input type="hidden" name="orderId" 
                                                value="<?php echo $orderNo;?>">
                                            <button name="order-att" class="btn btn-primary">
                                                Attend <i class="fa fa-edit"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                                <?php } ?>
                            </tbody>   
                        </table>
                    </div>   
                </div>
            </div>
            <!-- Add New Modal -->
            <div id="modal-add" class="modal">
                <div class="modal-content" style="margin-top:50px;">
                    <div class="modal-header text-success">Pending Orders <i class="fa fa-plus-circle"></i></div>
                    <div class="modal-body">
                        <form action="" method="POST">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="single-input">
                                        <label>Enter OrderNo to search</label>
                                        <div class="my-input">
                                            <input type="email" required="" autocomplete="off" name="email" placeholder="ORD-123456" autofocus="">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" onclick="closeModal('modal-add')">Cancel <i class="fa fa-cancel"></i> &times;</button>
                                <!-- Add product button -->
                                <button name="add-user" class="btn btn-success">Search <i class="fa fa-search"></i></button>
                            </div>
                            
                        </form>
                    </div>
                    
                </div>
            </div>
        </div>
   
    </div>
</div>
<?php
if (isset($_POST['order-att'])) {
    $orderId = $_POST['orderId'];
    $_SESSION['orderId'] = $orderId;
    header("Location:order_market.php");
}
?>

<?php include 'includes/footer.php'; ?>

<!-- DataTables & jQuery -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>

<script>
    $(document).ready(function () {
        $('#example').DataTable();
        $('#SelectAllBoxes').click(function () {
            $('.checkBoxes').prop('checked', this.checked);
        });
    });

    function openModal(id) {
        document.getElementById(id).style.display = "block";
    }

    function closeModal(id) {
        document.getElementById(id).style.display = "none";
    }

    function handleDelete() {
        const checked = document.querySelectorAll("input[name='checkBoxArray[]']:checked");
        if (checked.length === 0) {
            alert("No user selected!");
            return;
        }
        openModal('modal-delete');
    }
   
</script>


<!-- Modal Styling -->
<style>
    .modal {
        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);

    }

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

    .modal-header, .modal-footer {
        font-weight: bold;
    }

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

    /*.input-group button{
      background: #fff; 
      border-top-right-radius: 1px; 
      border-bottom-right-radius: 1px; 
      outline: none; 
      border:0.9px solid gray
    }
    .input-group input{
      border:0.9px solid gray
    }*/
    
    .single-input{
        margin-top: 10px;
    }
    .single-input label{
        font-size: 15px;
        margin-left: 20px;
        font-family: sans-serif;
    }
    .my-input input{
        width: 100%;
        border:2px solid #ccc;
        outline: none;
        font-size: 16px;
        color: 888;
        height: 50px;
        border-radius: 10px;
        padding: 15px;
        text-align: left;
       /* height: 20px;*/
    }
    .my-input select{
        width: 100%;
        border:2px solid #ccc;
        outline: none;
        font-size: 16px;
        color: 888;
        height: 50px;
        border-radius: 10px;
        padding: 10px;
       /* height: 20px;*/
    }
    
</style>

<?php include'includes/notification-alert-js.php';?>

<!-- <script>
    function Loadusers(){
        fetch("refresh/load_users.php",{
            method: 'POST'
        })
        .then(response=>{
            if (!response.ok) {
                throw new Error("Network Error");
            }
            return response.text();
        })
        .then(data=>{
            document.getElementById('loadUsers').innerHTML = data;
        })
        .catch(error=>{
            console.log('Something went wrong');
        })
    }
    Loadusers();
    setInverval(Loadusers, 2000);
</script> -->