<?php session_start();?>
<?php include'includes/header.php'; ?>
<?php include'includes/sidebar.php';?>
<?php include'includes/functions.php';?>
<?php include'includes/navbar.php'; ?>
<?php include'includes/filter-result.php';?>
<style>.sideNav{height:112vh;}</style>
<style>
@media(max-width: 992px){
    .sideNav{
        height: 138vh;
    }
}

/* Table animation */
.dataTables_wrapper table tbody tr {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease;
}

.dataTables_wrapper table tbody tr.row-visible {
  opacity: 1;
  transform: translateY(0);
}
    
</style>

<div id="notification-containers" class="notification-containers"></div>
<div class="insider" style="margin-top: -50px;">

    <div class="container">
        <div class="page-warm" style="display: flex; justify-content: space-between;">
            <span>Hi, <?php echo $username;?>.</span>
            <button class="btn btn-success" onclick="openModal('modal-add')">Create New <i class="fa fa-plus-circle"></i></button>
        </div>
        <div class="cat-pag" >

            <!-- filter buttons and summary cards -->
            <?php require'includes/card-summary-filter-btn.php';?>

            <div class="card mt-3">
                <div class="card-header text-center" style="display: flex; justify-content: space-between;">
                    <?php
                    if ($filter_result) {?>
                        <div class="sorting" style="padding: 8px; background: #F3F1FE; color: #1F282F; border-radius: 13px; font-size: 16px; font-weight: bold;"><i class="fa fa-sort"></i><?php echo $filter_result;?>
                        </div>
                    <?php }else{
                        echo "Something went wrong";
                    }
                    ?>

                    <h5>Recent Invoice</h5>
                </div>
                <?php require'includes/filter-table.php';?>
            </div>
            
        </div>
   
    </div>
</div>


<div id="modal-add" class="modal">
    <div class="modal-content" style="margin-top:100px;">
        <div class="modal-header">Create New Invoice <i class="fa fa-plus-circle"></i></div>
        <div class="modal-body">
            <form action="" method="POST" id="myForm">
                <!-- Phone Number -->
                <label>Customer's Mobile Number</label>
                <input type="number" name="mobile" class="form-resp" placeholder="Phone Number" required autocomplete="off">

                <!-- Action button -->
                <button type="submit" type="submit" name="add-product" class="btn btn-success mt-4">Continue <i class="fa fa-caret-right"></i></button>
            </form>
            <div id="response"></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>
        </div>
    </div>
</div>

<?php
if (isset($_POST['add-cust-Btn'])) {
    $phoneNo = $_POST['phoneNo'];
    $firstname = $_POST['firstname'];
    $lastname = $_POST['lastname'];
    $email = $_POST['email'];

    if (empty($email)) {
        $email = 'NILL';
    }

    // Add customer to their table
    $cust = "INSERT INTO account (firstname, lastname, mobile, email)
            VALUES(?, ?, ?, ?)";
    $stmt = $pdo->prepare($cust);
    $stmt->execute([$firstname, $lastname, $phoneNo, $email]);
    $_SESSION['customer'] = $phoneNo;
    $_SESSION['lastname'] = $lastname;
    header("Location:mart.php"); 
}
?>

<style>
.form-resp{
    width: 100%;
    height: 50px;
    border: 2px solid #ddd;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 8px;
    outline: none;
    font-size: 17px;
}
    .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);
        backdrop-filter:blur(3px);
    }

    .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); }
    }

</style>


<?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>


<!-- DataTables Buttons Extension -->
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">

<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script>
    $(document).ready(function () {
        $('#example').DataTable({
            dom: '<"d-flex justify-content-between align-items-center mb-2"lfB>rt<"d-flex justify-content-between align-items-center mt-2"ip>',
            buttons: [
                {
                    extend: 'excelHtml5',
                    text: 'Export to Excel',
                    className: 'btn btn-success me-2'
                },
                {
                    extend: 'csvHtml5',
                    text: 'Export to CSV',
                    className: 'btn btn-primary me-2'
                },
                {
                    extend: 'pdfHtml5',
                    text: 'Export to PDF',
                    className: 'btn btn-danger me-2'
                },
                {
                    extend: 'print',
                    text: 'Print Table',
                    className: 'btn btn-dark'
                }
            ],
            language: {
                searchPlaceholder: "Invoice ID to search...",
                
            },
            pageLength: 10, // default entries per page
            lengthMenu: [ [5, 10, 25, 50, -1], [5, 10, 25, 50, "All"] ]
        });
    }); 

    $(document).ready(function () {
      var table = $('#example').DataTable();

      // Apply animation on draw
      table.on('draw', function () {
        $('#example tbody tr').each(function (index) {
          const row = $(this);
          setTimeout(function () {
            row.addClass('row-visible');
          }, 50 * index); // Staggered animation
        });

        // Remove old classes before applying again
        $('#example tbody tr').removeClass('row-visible');
      });

      // Trigger the first draw
      table.draw();
    });
</script>


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


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

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





  <script>
    document.getElementById("myForm").addEventListener("submit", function(e){
      e.preventDefault();
      let form = e.target;
      let formData = new FormData(form);

      fetch("fetch.php",{
        method: 'POST',
        body: formData
      })
      .then(response => response.text()) // ✅ Get text content first
          .then(data => {
            if (data.trim() === "redirect") {
              window.location.href = "mart.php"; // ✅ Redirect to the page
            } else {
              document.getElementById('response').innerHTML = data; // Show error/success message
              form.reset();
            }
          })
      .catch(error =>{
        document.getElementById('response').innerHTML = "Error Submission";
      })
    })
  </script>
</div>