<!DOCTYPE html>
<html lang="en">
<?php include 'includes/head.php'; ?>

<body>

    <div id="global-loader">
        <div class="whirly-loader"> </div>
    </div>

    <!-- Main Wrapper -->
    <div class="main-wrapper">

        <!-- Header -->
        <?php include './includes/navbar.php'; ?>
        <!-- /Header -->

        <?php $page = 'customer-list';
        include './includes/sidebar.php'; ?>

        <div class="page-wrapper">
            <div class="content">
                <div class="page-header">
                    <div class="add-item d-flex">
                        <div class="page-title">
                            <h4>Customers</h4>
                            <h6>Manage Your First Reference</h6>
                        </div>
                    </div>
                    <ul class="table-top-head">
                        <li>
                            <a data-bs-toggle="tooltip" data-bs-placement="top" title="Pdf"><img src="images/pdf.svg" alt="img"></a>
                        </li>
                        <li>
                            <a data-bs-toggle="tooltip" data-bs-placement="top" title="Excel"><img src="images/excel.svg" alt="img"></a>
                        </li>
                        <li>
                            <a data-bs-toggle="tooltip" data-bs-placement="top" title="Print"><i data-feather="printer" class="feather-rotate-ccw"></i></a>
                        </li>
                        <li>
                            <a data-bs-toggle="tooltip" data-bs-placement="top" title="Refresh"><i data-feather="rotate-ccw" class="feather-rotate-ccw"></i></a>
                        </li>
                        <li>
                            <a data-bs-toggle="tooltip" data-bs-placement="top" title="Collapse" id="collapse-header"><i data-feather="chevron-up" class="feather-chevron-up"></i></a>
                        </li>
                    </ul>
                    <div class="page-btn">
                        <a href="add-customer.php" class="btn btn-added"><i data-feather="plus-circle" class="me-2"></i>Add New Customer</a>
                    </div>
                </div>
                <!-- /product list -->
                <div class="card table-list-card">
                    <div class="card-body">
                        <div class="table-top">
                            <div class="search-set">
                                <div class="search-input">
                                    <a href="" class="btn btn-searchset"><i data-feather="search" class="feather-search"></i></a>
                                </div>
                            </div>
                            <div class="search-path">
                                <a class="btn btn-filter" id="filter_search">
                                    <i data-feather="filter" class="filter-icon"></i>
                                    <span><img src="images/closes.svg" alt="img"></span>
                                </a>
                            </div>
                            <div class="form-sort">
                                <i data-feather="sliders" class="info-img"></i>
                                <select class="select">
                                    <option>Sort by Date</option>
                                    <option>Newest</option>
                                    <option>Oldest</option>
                                </select>
                            </div>
                        </div>
                        <!-- /Filter -->
                        <div class="card" id="filter_inputs">
                            <div class="card-body pb-0">
                                <div class="row">
                                    <div class="col-lg-3 col-sm-6 col-12">
                                        <div class="input-blocks">
                                            <i data-feather="zap" class="info-img"></i>
                                            <select class="select">
                                                <option>Choose Brand</option>
                                                <option>Lenevo</option>
                                                <option>Boat</option>
                                                <option>Nike</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-6 col-12">
                                        <div class="input-blocks">
                                            <i data-feather="calendar" class="info-img"></i>
                                            <div class="input-groupicon">
                                                <input type="text" class="datetimepicker" placeholder="Choose Date">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-6 col-12">
                                        <div class="input-blocks">
                                            <i data-feather="stop-circle" class="info-img"></i>
                                            <select class="select">
                                                <option>Choose Status</option>
                                                <option>Active</option>
                                                <option>Inactive</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-6 col-12 ms-auto">
                                        <div class="input-blocks">
                                            <a class="btn btn-filters ms-auto"> <i data-feather="search" class="feather-search"></i> Search </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /Filter -->
                        <div class="table-responsive product-list">
                            <?php
                            require_once 'php/databaseConnection.php';

                            // Database connection
                            $mysqli = db_connect();
                            if (!$mysqli) {
                                die("Database connection failed: " . $mysqli->connect_error);
                            }

                            // Fetch data from the customerField table
                            $sql = "SELECT job_number, customer_name, contact_number, job_date, register_number, year, 
               vehicle_brand, vehicle_model, vehicle_colour, millage, engine_number, vin_number, jobCardStatus, 
               contactPerson, personContactNumber, technicianName, supervisor, imageOfCar
        FROM customerField ORDER BY job_date DESC";

                            $result = $mysqli->query($sql);
                            ?>

                            <table class="table datanew">
                                <thead>
                                    <tr>
                                        <th>Job No.</th>
                                        <th>Customer Name</th>
                                        <th>Contact</th>
                                        <th>Job Date</th>
                                        <th>Reg. No.</th>
                                        <th>Vehicle Year</th>
                                        <th>Vehicle Brand</th>
                                        <th>Vehicle Model</th>
                                        <th>Vehicle Colour</th>
                                        <th>Millage</th>
                                        <th>Engine No.</th>
                                        <th>Vin No.</th>
                                        <th>Contact Person</th>
                                        <th>Contact Person Phone</th>
                                        <th>Technician</th>
                                        <th>Supervisor</th>
                                        <th>Job Status</th>
                                        <th class="no-sort">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php
                                    if ($result->num_rows > 0) {
                                        while ($row = $result->fetch_assoc()) {
                                            echo "<tr>
                        <td><a href='#' class='link-primary'>" . $row['job_number'] . "</a></td>
                        <td>{$row['customer_name']}</td>
                        <td>{$row['contact_number']}</td>
                        <td>{$row['job_date']}</td>
                        <td>{$row['register_number']}</td>
                        <td>{$row['year']}</td>
                        <td>{$row['vehicle_brand']}</td>
                        <td>{$row['vehicle_model']}</td>
                        <td>{$row['vehicle_colour']}</td>
                        <td>{$row['millage']}</td>
                        <td>{$row['engine_number']}</td>
                        <td>{$row['vin_number']}</td>
                        <td>{$row['contactPerson']}</td>
                        <td>{$row['personContactNumber']}</td>
                        <td>{$row['technicianName']}</td>
                        <td>{$row['supervisor']}</td>
                        <td><span class='badge badge-soft-success d-inline-flex align-items-center'>
                            <i class='ti ti-circle-filled fs-5 me-1'></i>{$row['jobCardStatus']}</span></td>
                        <td class='action-table-data'>
                            <div class='edit-delete-action'>
                                <a class='me-2 edit-icon p-2' href='customerDetails.php?job_number={$row['job_number']}'>
                                    <i data-feather='eye' class='feather-eye'></i>
                                </a>
                                <a class='me-2 p-2' href='edit-customer.php?job_number={$row['job_number']}'>
                                    <i data-feather='edit' class='feather-edit'></i>
                                </a>
                                <a class='p-2' href='invoiceReport.php?job_number={$row['job_number']}'>
                                    <i data-feather='printer' class='feather-eye'></i>
                                </a>
                            </div>
                        </td>
                    </tr>";
                                        }
                                    }
                                    $mysqli->close();
                                    ?>
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>
                <!-- /product list -->
            </div>
        </div>
    </div>
    <!-- /Main Wrapper -->

    <div class="customizer-links" id="setdata">
        <ul class="sticky-sidebar">
            <li class="sidebar-icons">
                <a href="#" class="navigation-add" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-original-title="Theme">
                    <i data-feather="settings" class="feather-five"></i>
                </a>
            </li>
        </ul>
    </div>

    <!-- jQuery -->
    <script src="js/jquery-3.7.1.min.js" type="313262e797703a9421c22571-text/javascript"></script>

    <!-- Feather Icon JS -->
    <script src="js/feather.min.js" type="313262e797703a9421c22571-text/javascript"></script>

    <!-- Slimscroll JS -->
    <script src="js/jquery.slimscroll.min.js" type="313262e797703a9421c22571-text/javascript"></script>

    <!-- Datatable JS -->
    <script src="js/jquery.dataTables.min.js" type="313262e797703a9421c22571-text/javascript"></script>
    <script src="js/dataTables.bootstrap5.min.js" type="313262e797703a9421c22571-text/javascript"></script>

    <!-- Bootstrap Core JS -->
    <script src="js/bootstrap.bundle.min.js" type="313262e797703a9421c22571-text/javascript"></script>

    <!-- Select2 JS -->
    <script src="js/select2.min.js" type="313262e797703a9421c22571-text/javascript"></script>

    <!-- Datetimepicker JS -->
    <script src="js/moment.min.js" type="313262e797703a9421c22571-text/javascript"></script>
    <script src="js/bootstrap-datetimepicker.min.js" type="313262e797703a9421c22571-text/javascript"></script>

    <!-- Sweetalert 2 -->
    <script src="js/sweetalert2.all.min.js" type="313262e797703a9421c22571-text/javascript"></script>
    <script src="js/sweetalerts.min.js" type="313262e797703a9421c22571-text/javascript"></script>

    <!-- Custom JS -->

    <script src="js/script.js" type="313262e797703a9421c22571-text/javascript"></script>

    <script src="js/rocket-loader.min.js" data-cf-settings="313262e797703a9421c22571-|49" defer=""></script>
</body>

</html>