<?php include("includes/db_config.php"); ?>
<!DOCTYPE html>
<html lang="en" dir="ltr" data-theme="light">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <?php include("includes/css.php");?>
    <style>
        .modal-body .form-label{font-weight:600;}.mt-35{margin-top:35px!important}.viewptdt .form-label{font-weight:600;}.viewptdt label{margin-top:10px;}.portlet-titles{padding: 15px 20px;font-size: 20px;border-radius: 10px;}.portlet-titles-icon{font-size: 40px;text-align: center}.srchdt label{font-weight: 600;font-size: 14px;margin-top: 10px;}
    </style>
</head>


<body class="preload-active aside-active aside-mobile-minimized aside-desktop-maximized">
    <div class="holder">
        <?php include("includes/sidebar.php");?>
        <div class="wrapper">
            <?php include("includes/header.php");?>
            <div class="content">
                <div class="container-fluid g-5">                    
                    <div class="row">
                         <div class="col-12">
                            <div class="portlet">
                                <div class="portlet-header portlet-header-bordered">
                                    <div class="col-md-9">
                                        <h3 class="portlet-title">All Purchase List</h3>
                                    </div>
                                    <div class="col-md-3">
                                        <center><a href="add-purchase-detail.php"><button class="btn btn-success btn-md"><i class="fa fa-plus"></i> Add New Purchase Details</button></a></center>
                                    </div>
                                 </div>
                                <div class="row srchdt">
                                    <div class="col-md-1"></div>
                                    <div class="col-md-2 col-12 col-xs-12">
                                        <label><b>Select</b></label>
                                       <select id="date_filter" class="form-control">
                                            <option value="">Select</option>
                                            <option value="this_month">This Month</option>
                                            <option value="this_year">This Year</option>
                                        </select>
                                    </div>
                                    <div class="col-md-2 col-12 col-xs-12">
                                        <label><b>From</b></label>
                                       <input type="date" id="from_date" class="form-control">
                                    </div>
                                    <div class="col-md-2 col-12 col-xs-12">
                                        <label><b>To</b></label>
                                       <input type="date" id="to_date" class="form-control">
                                    </div>
                                    <div class="col-md-2 col-12 col-xs-12"> 
                                       <button id="filterBtn" class="btn btn-success btn-lg mt-35">Submit</button>
                                    </div>
                                    <div class="col-md-12"><hr/></div>
                                 </div>
                               <!-- <div class="portlet-header portlet-header-bordered">
                                    <div class="col-md-2">
                                        <div class="portlet-titles bg-success text-white">Paid<br/><strong>₹ 1200.00</strong></div>
                                    </div>
                                    <div class="col-md-1">
                                        <div class="portlet-titles-icon">+</div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="portlet-titles bg-warning">Unpaid<br/><strong>₹ 200.00</strong></div>
                                    </div>
                                    <div class="col-md-1">
                                        <div class="portlet-titles-icon">=</div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="portlet-titles bg-primary text-white">Total<br/><strong>₹ 1400.00</strong></div>
                                    </div>
                                   
                                 </div> -->
                                 <div class="portlet-header portlet-header-bordered">
    <div class="col-md-2">
        <div class="portlet-titles bg-success text-white">Paid<br/><strong class="paid-amount">₹ 0.00</strong></div>
    </div>
    <div class="col-md-1">
        <div class="portlet-titles-icon">+</div>
    </div>
    <div class="col-md-2">
        <div class="portlet-titles bg-warning">Unpaid<br/><strong class="unpaid-amount">₹ 0.00</strong></div>
    </div>
    <div class="col-md-1">
        <div class="portlet-titles-icon">=</div>
    </div>
    <div class="col-md-2">
        <div class="portlet-titles bg-primary text-white">Total<br/><strong class="total-amount">₹ 0.00</strong></div>
    </div>
</div>

                                <div class="portlet-body table-responsive">
                                    <table id="purchaseTable" class="table table-bordered table-striped table-hover">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Bill No</th>
                                                <th>Bill Date</th>
                                                <th>Party Name</th>
                                                <th>Payment Type</th>
                                                <th>Total</th>
                                                <th>Balance Due</th>
                                                <th><center>Action</center></th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>  <!-- Data will be inserted here via AJAX -->
                                    </table>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>       
            <?php include("includes/footer.php");?>
        </div>
    </div>
    <?php include("includes/js.php");?>
    <script>
$(document).ready(function() {
    function fetchFilteredData() {
        var date_filter = $('#date_filter').val();
        var from_date = $('#from_date').val();
        var to_date = $('#to_date').val();

        $.ajax({
            url: "fetch_purchase_data.php",
            type: "POST",
            data: { date_filter: date_filter,from_date: from_date, to_date: to_date},
            /*success: function(response) {
                $('#purchaseTable tbody').html(response);
                $('.paid-amount').html('₹ ' + response.paid);
                $('.unpaid-amount').html('₹ ' + response.unpaid);
                $('.total-amount').html('₹ ' + response.total);
            }*/
            dataType: "json",
            success: function(response) {
                $('#purchaseTable tbody').html(response.table_data);
                $('.paid-amount').html('₹ ' + response.paid);
                $('.unpaid-amount').html('₹ ' + response.unpaid);
                $('.total-amount').html('₹ ' + response.total);
            }
        });
    }

    // Trigger filtering when the filter button is clicked
    $('#filterBtn').click(function() {
        fetchFilteredData();
    });

    $('#date_filter').change(function() {
        fetchFilteredData();
    });

    // Trigger filtering when any input changes
    $('#from_date, #to_date').change(function() {
        fetchFilteredData();
    });

    // Load data initially
    fetchFilteredData();
});
      function delete_ptype_by_ID(id) {
        if (confirm('Do You Want to Deleting This \nContinue anyway?')) {
            window.location.href = 'delete_purchase.php?id=' + id;
        }
    }
    </script>
</body>
</html>