<?php
include 'includes/config.php';
session_start();

if (!$_SESSION['email']) {
    header('location:login.php');
}
?>
<html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>View Customers</title>
    <!-- Favicon -->
    <link rel="shortcut icon" href="images/favicon.ico" />
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- Typography CSS -->
    <link rel="stylesheet" href="css/typography.css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="css/style.css">
    <!-- Responsive CSS -->
    <link rel="stylesheet" href="css/responsive.css">
    <style>
        ion-icon {
            font-size: 20px;
            margin-bottom: -5px;
        }
    </style>
</head>

<body>
    <!-- loader Start -->
    <div id="loading">
        <div id="loading-center">
        </div>
    </div>
    <!-- loader END -->
    <!-- Wrapper Start -->
    <div class="wrapper">
        <!-- Sidebar  -->
        <?php
        include 'includes/sidebar.php';
        ?>
        <!-- TOP Nav Bar -->
        <?php include 'includes/header.php'; ?>
        <!-- TOP Nav Bar END -->
        <!-- Page Content  -->
        <div id="content-page" class="content-page">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="iq-card">
                            <div class="iq-card-header d-flex justify-content-between row">
                                <div class="iq-header-title col-lg-6">
                                    <h4 class="card-title"><a href="list_customers.php">Customers</a> > View Customers
                                    </h4>
                                </div>
                                <div class="col-lg-6">
                                    <button class="btn btn-primary  ps-5 pe-5" style="float:inline-end;">
                                        <a href="add_customer.php">
                                            <ion-icon name="add-outline" style="font-size:20px; color:#fff; margin-bottom:-4px">
                                            </ion-icon> <span style="color:#fff;">Add Customer</span>
                                        </a>
                                    </button>
                                </div>
                            </div>
                            <!-- search bar -->
                            <form action="" method="GET">
                                <div class="row mt-5" style="width:95%;margin:0 auto;">
                                    <div class="col-lg-5">
                                        <input type="search" name="search" class="form-control" id="searchInput" placeholder="Search..." value="<?php echo isset($_GET['search']) ? htmlentities($_GET['search']) : ''; ?>">
                                    </div>

                                    <div class="col-lg-2">
                                        <button type="submit" style="width:100%;" class="btn btn-primary p-2">Search</button>
                                    </div>

                                    <div class="col-lg-2">
                                        <a href="list_customers.php" style="width:100%;" class="btn btn-secondary p-2">Clear Filter</a>
                                    </div>
                                </div>
                            </form>
                            <!-- searchbar end -->
                            <!-- buttons for export -->
                            <div class="row mt-5">
                                <div class="col-lg-2"></div>
                                <!-- <div class="col-lg-8">
                                    <button class="btn btn-primary">
                                        <ion-icon name="document-outline"></ion-icon>Export to CSV
                                    </button>
                                    <button class="btn btn-info">
                                        <ion-icon name="document-outline"></ion-icon>Export to Excel
                                    </button>
                                    <button class="btn btn-warning">
                                        <ion-icon name="print-outline"></ion-icon>Print
                                    </button>
                                    <button class="btn btn-danger">
                                        <ion-icon name="stop-outline"></ion-icon>Column Visibility
                                    </button>
                                    <button class="btn btn-dark">
                                        <ion-icon name="document-outline"></ion-icon>Export to PDF
                                    </button>
                                </div> -->
                            </div>
                            <!-- buttons for export end -->
                            <div class="iq-card-body" style="overflow:auto;">
                               <?php 
include 'includes/config.php';
$search = isset($_GET['search']) ? $_GET['search'] : '';

$sql = "SELECT * FROM `contacts` WHERE type = 'customer' AND name != 'Audit Sale' ";
if (!empty($search)) {
    $sql .= "AND (contact_id LIKE :search OR name LIKE :search OR email LIKE :search OR tax_number LIKE :search) ";
}
$sql .= "ORDER BY id DESC;";
$query = $conn->prepare($sql);

if (!empty($search)) {
    $searchParam = "%{$search}%";
    $query->bindParam(':search', $searchParam, PDO::PARAM_STR);
}

$query->execute();
$results = $query->fetchAll(PDO::FETCH_OBJ);
?>

<table class="table table-hover table-bordered"> 
    <thead>
        <tr>
            <th colspan="3">Actions</th>
            <th>Customer Image</th>
            <th>Name</th>
            <th>Father Name</th>
            <th>Email</th>
            <th>Opening Balance</th>
            <th>Home Address</th>
            <th>Phone No</th>
            <th>Added On</th>
        </tr>
    </thead>
    <tbody>
        <?php if ($query->rowCount() > 0): ?>
            <?php foreach ($results as $result): ?>
                <tr>
                    <td>
                        <button class="btn btn-danger btn-sm" onclick="openEditModal(<?= $result->id ?>)">Edit</button>
                    </td>
                    <td>
                        <a href="action/delete_customer.php?del=<?= $result->id ?>" onclick="return confirmDelete(event);">
                            <ion-icon name="trash-outline"></ion-icon>
                        </a>
                    </td>
                    <td></td>

                    <td><img src="<?= htmlentities($result->customer_image) ?>" alt="Customer Image" style="height:50px;"></td>
                    <td><?= htmlentities($result->name) ?></td>
                    <td><?= htmlentities($result->father_name) ?></td>
                    <td><?= htmlentities($result->email) ?></td>
                    <td><?= htmlentities($result->opening_balance) ?></td>
                    <td><?= htmlentities($result->home_address) ?></td>
                    <td><?= htmlentities($result->phone_no) ?></td>
                    <td><?= htmlentities($result->created_at) ?></td>
                </tr>
            <?php endforeach; ?>
        <?php else: ?>
            <tr><td colspan="24" class="text-center">No results found</td></tr>
        <?php endif; ?>
    </tbody>
</table>

                                <!-- Guarantor Modal -->
                                <div id="guarantorModal" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    background:#fff; padding:20px; border-radius:10px; box-shadow:0 4px 20px rgba(0,0,0,0.3); z-index:9999; width:700px; max-height:80vh; overflow-y:auto;">
                                    <h4>Guarantor Details</h4>
                                    <div id="guarantorContent" style="margin-top:10px;"></div>
                                    <div style="text-align:right; margin-top:10px;">
                                        <button onclick="closeGuarantorModal()" style="padding:5px 10px; border:none; background:#e74c3c; color:#fff; border-radius:5px; cursor:pointer;">Close</button>
                                    </div>
                                </div>
                                <script>
                                    function viewGuarantors(customerId) {
                                        fetch('get_guarantors.php?customer_id=' + customerId)
                                            .then(response => response.json())
                                            .then(data => {
                                                if (data.length === 0) {
                                                    document.getElementById('guarantorContent').innerHTML = '<p>No guarantors found.</p>';
                                                } else {
                                                    let html = '<table class="table table-bordered table-hover">';
                                                    html += '<thead><tr><th>Type</th><th>Name</th><th>Father</th><th>Email</th><th>Phone1</th><th>Phone2</th><th>Address</th><th>CNIC</th><th>Note</th><th>Granted</th><th>CNIC Front</th><th>CNIC Back</th></tr></thead><tbody>';

                                                    data.forEach(g => {
                                                        html += `<tr>
                    <td>${g.type}</td>
                    <td>${g.name}</td>
                    <td>${g.father_name}</td>
                    <td>${g.email}</td>
                    <td>${g.phone1}</td>
                    <td>${g.phone2}</td>
                    <td>${g.address}</td>
                    <td>${g.cnic}</td>
                    <td>${g.note}</td>
                    <td>${g.granted == 1 ? 'Yes' : 'No'}</td>
                    <td>${g.cnic_front ? '<a href="'+g.cnic_front+'" target="_blank"><img src="'+g.cnic_front+'" style="height:50px;"></a>' : ''}</td>
                    <td>${g.cnic_back ? '<a href="'+g.cnic_back+'" target="_blank"><img src="'+g.cnic_back+'" style="height:50px;"></a>' : ''}</td>
                </tr>`;
                                                    });

                                                    html += '</tbody></table>';
                                                    document.getElementById('guarantorContent').innerHTML = html;
                                                }

                                                document.getElementById('guarantorModal').style.display = 'block';
                                            })
                                            .catch(err => {
                                                console.error(err);
                                                alert('Failed to fetch guarantors.');
                                            });
                                    }

                                    function closeGuarantorModal() {
                                        document.getElementById('guarantorModal').style.display = 'none';
                                    }
                                </script>

                                <script>
                                    function confirmDelete(event) {
                                        // Show a confirmation dialog
                                        const isConfirmed = confirm("Are you sure you want to delete this customer?");

                                        // Prevent the default action if the user cancels
                                        if (!isConfirmed) {
                                            event.preventDefault();
                                            return false;
                                        }

                                        return true; // Proceed with deletion if confirmed
                                    }
                                </script>

     <div id="editModal" class="modal">  
    <div class="modal-content">
        <span class="close" onclick="closeModal()">&times;</span>

        <form id="editForm" method="post">
            <input type="hidden" id="edit_id" name="edit_id" readonly>

            <label for="edit_name">Name:</label>
            <input type="text" id="edit_name" name="edit_name" required>

            <label for="edit_father_name">Father Name:</label>
            <input type="text" id="edit_father_name" name="edit_father_name">

            <label for="edit_email">Email:</label>
            <input type="email" id="edit_email" name="edit_email">

            <label for="edit_home_address">Home Address:</label>
            <input type="text" id="edit_home_address" name="edit_home_address">

            <label for="edit_phone_no">Phone No:</label>
            <input type="text" id="edit_phone_no" name="edit_phone_no">

            <!-- 🟢 Added Opening Balance Field -->
            <label for="edit_opening_balance">Opening Balance:</label>
            <input type="number" step="0.01" id="edit_opening_balance" name="edit_opening_balance">

            <button type="button" onclick="updateContact()">Update</button>
        </form>
    </div>
</div>



                                <style>
                                    /* Modal Background */
                                    .modal {
                                        display: none;
                                        /* Hidden by default */
                                        position: fixed;
                                        /* Stay in place */
                                        z-index: 1;
                                        /* Sit on top */
                                        left: 0;
                                        top: 0;
                                        width: 100%;
                                        /* Full width */
                                        height: 100%;
                                        /* Full height */
                                        overflow: auto;
                                        /* Enable scroll if needed */
                                        background-color: rgba(0, 0, 0, 0.6);
                                        /* Darker background with more opacity */
                                    }

                                    /* Modal Content */
                                    .modal-content {
                                        background-color: #ffffff;
                                        margin: 10% auto;
                                        /* Centered with less top margin */
                                        padding: 30px;
                                        border-radius: 8px;
                                        width: 90%;
                                        max-width: 600px;
                                        /* Maximum width */
                                        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                                        animation: fadeIn 0.3s ease-out;
                                        /* Fade-in animation */
                                    }

                                    /* Close Button */
                                    .close {
                                        color: #555;
                                        float: right;
                                        font-size: 24px;
                                        font-weight: bold;
                                        cursor: pointer;
                                        transition: color 0.2s;
                                    }

                                    .close:hover {
                                        color: #e74c3c;
                                    }

                                    /* Form Styles */
                                    .modal-content label {
                                        display: block;
                                        margin: 10px 0 5px;
                                        font-weight: bold;
                                        color: #333;
                                    }

                                    .modal-content input {
                                        width: calc(100% - 20px);
                                        padding: 10px;
                                        margin-bottom: 15px;
                                        border: 1px solid #ddd;
                                        border-radius: 4px;
                                        font-size: 14px;
                                        box-sizing: border-box;
                                        transition: border-color 0.3s ease-in-out;
                                    }

                                    .modal-content select {
                                        width: calc(100% - 20px);
                                        padding: 10px;
                                        margin-bottom: 15px;
                                        border: 1px solid #ddd;
                                        border-radius: 4px;
                                        font-size: 14px;
                                        box-sizing: border-box;
                                        transition: border-color 0.3s ease-in-out;
                                    }

                                    .modal-content input:focus {
                                        border-color: #007bff;
                                        outline: none;
                                        box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
                                    }

                                    /* Update Button */
                                    .modal-content button {
                                        background-color: #007bff;
                                        color: #fff;
                                        border: none;
                                        padding: 10px 20px;
                                        border-radius: 4px;
                                        cursor: pointer;
                                        transition: background-color 0.3s;
                                    }

                                    .modal-content button:hover {
                                        background-color: #0056b3;
                                    }

                                    /* Fade-in animation for modal */
                                    @keyframes fadeIn {
                                        from {
                                            opacity: 0;
                                            transform: scale(0.9);
                                        }

                                        to {
                                            opacity: 1;
                                            transform: scale(1);
                                        }
                                    }
                                </style>
                              <script>
function openEditModal(id) {
    fetch('fetch_contact.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: new URLSearchParams({ 'id': id })
    })
    .then(response => response.json())
    .then(data => {
        console.log('Data received:', data);

        if (data && data.id) {
            document.getElementById('edit_id').value = data.id || '';
            document.getElementById('edit_name').value = data.name || '';
            document.getElementById('edit_father_name').value = data.father_name || '';
            document.getElementById('edit_email').value = data.email || '';
            document.getElementById('edit_home_address').value = data.home_address || '';
            document.getElementById('edit_phone_no').value = data.phone_no || '';
            document.getElementById('edit_opening_balance').value = data.opening_balance || '0.00';

            document.getElementById('editModal').style.display = 'block';
        } else {
            alert('No data found for this ID');
        }
    })
    .catch(error => console.error('❌ Fetch error:', error));
}

function updateContact() {
    var formData = new FormData(document.getElementById('editForm'));

    fetch('update_contact.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.text())
    .then(result => {
        console.log('Update result:', result);

        if (result.toLowerCase().includes('success')) {
            alert('Contact updated successfully!');
            closeModal();
            location.reload();
        } else {
            alert('Failed to update contact.');
        }
    })
    .catch(error => console.error('Update error:', error));
}

function closeModal() {
    document.getElementById('editModal').style.display = 'none';
}

var modal = document.getElementById('editModal');
var span = document.getElementsByClassName('close')[0];

span.onclick = function() { closeModal(); }
window.onclick = function(event) { if (event.target === modal) closeModal(); }
</script>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    </div>
    <!-- Wrapper END -->
    <!-- Footer -->
    <footer class="iq-footer">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-6">
                    <ul class="list-inline mb-0">
                        <li class="list-inline-item"><a href="privacy-policy.html">Privacy Policy</a></li>
                        <li class="list-inline-item"><a href="terms-of-service.html">Terms of Use</a></li>
                    </ul>
                </div>
                <div class="col-lg-6 text-right">
                    Copyright <span id="copyright">
                        <script>
                            document.getElementById('copyright').appendChild(document.createTextNode(new Date()
                                .getFullYear()))
                        </script>
                    </span> <a href="#">Vito</a> All Rights Reserved.
                </div>
            </div>
        </div>
    </footer>
    <nav class="iq-float-menu">
        <input type="checkbox" href="#" class="iq-float-menu-open" name="menu-open" id="menu-open" />
        <label class="iq-float-menu-open-button" for="menu-open">
            <span class="lines line-1"></span>
            <span class="lines line-2"></span>
            <span class="lines line-3"></span>
        </label>
        <button class="iq-float-menu-item bg-info" data-toggle="tooltip" data-placement="top" title="Direction Mode"
            data-mode="rtl"><i class="ri-text-direction-r"></i></button>
        <button class="iq-float-menu-item bg-danger" data-toggle="tooltip" data-placement="top" title="Color Mode"
            id="dark-mode" data-active="true"><i class="ri-sun-line"></i></button>
        <button class="iq-float-menu-item bg-warning" data-toggle="tooltip" data-placement="top" title="Comming Soon"><i
                class="ri-palette-line"></i></button>
    </nav>
    <!-- Footer END -->
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/jquery.min.js"></script>
    <!-- Rtl and Darkmode -->
    <script src="js/rtl.js"></script>
    <script src="js/customizer.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- Appear JavaScript -->
    <script src="js/jquery.appear.js"></script>
    <!-- Countdown JavaScript -->
    <script src="js/countdown.min.js"></script>
    <!-- Counterup JavaScript -->
    <script src="js/waypoints.min.js"></script>
    <script src="js/jquery.counterup.min.js"></script>
    <!-- Wow JavaScript -->
    <script src="js/wow.min.js"></script>
    <!-- Apexcharts JavaScript -->
    <script src="js/apexcharts.js"></script>
    <!-- Slick JavaScript -->
    <script src="js/slick.min.js"></script>
    <!-- Select2 JavaScript -->
    <script src="js/select2.min.js"></script>
    <!-- Owl Carousel JavaScript -->
    <script src="js/owl.carousel.min.js"></script>
    <!-- Magnific Popup JavaScript -->
    <script src="js/jquery.magnific-popup.min.js"></script>
    <!-- Smooth Scrollbar JavaScript -->
    <script src="js/smooth-scrollbar.js"></script>
    <!-- lottie JavaScript -->
    <script src="js/lottie.js"></script>
    <!-- Chart Custom JavaScript -->
    <script src="js/chart-custom.js"></script>
    <!-- Custom JavaScript -->
    <script src="js/custom.js"></script>
</body>

<!-- Mirrored from templates.iqonic.design/vito/html/main/data-table.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 21 Aug 2024 10:45:18 GMT -->

</html>