Forward_Station_Server/api/v1/Customers/customersDetails.php

<div id="page-customers">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
        
<button class="btn btn-primary" onclick="document.getElementById('addForm').style.display = 'block';document.getElementById('editForm').style.display = 'none';document.getElementById('editVForm').style.display = 'none';document.getElementById('addVForm').style.display = 'none';document.getElementById('deleteForm').style.display = 'none';"> Add Customer </button>

<table id="example" class="table display table-striped table-bordered table-hover table-sm" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th></th>
          <th></th>
          <th>Id</th>
          <th>Name</th>
          <th>Credit Sale</th>
        </tr>
      </thead>

        <tfoot>
            <tr>
                <th></th>
                <th></th>
                <th>Id</th>
                <th>Name</th>
                <th>Credit Sale</th>
            </tr>
        </tfoot>
    </table>
</div>
<div class="col-sm-6">
    <!-- <input type="number" name="" id="loadVehicles"> -->
    <?php include "vehiclesVw.php" ?>
    <?php include "vehiclesDetails.php" ?>
</div>

</div>
</div>


<?php include "addCustomer.php" ?>
<?php include "Edit.php" ?>
<?php include "Delete.php" ?>
<?php include "editVehicle.php" ?>
<?php include "addVehicle.php" ?>
<?php include "deleteVehicle.php" ?>

</div>



<script type="text/javascript">
$(document).ready(function() {
    var table = $('#example').DataTable( {
        // "buttons": true,
        "ajax": "api/v1/Customers/customers.txt",
        "columns": [
            {
                "className":      'delete',
                "orderable":      false,
                "data":           null,
                "defaultContent": '<button class="btn btn-danger" style="width:40px;height:31px;"><i class="fa fa-trash-o"></i></button>',

            },
            {
                "className":      'edit',
                "orderable":      false,
                "data":           null,
                "defaultContent": '<button class="btn btn-info" style="width:40px;height:31px;"><i class="far fa-edit"><i></button>'
            },
            { "data": "Customer_Id" },
            { "data": "Name",
              "className":'name'
             },
            { "data": "Credit_Sale" },
            //{ "data": "Id" },
            //{ "data": "Number" },
        ],
        "order": [[1, 'asc']],
        select: true
    } );

    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.name', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
        var username = row.data()['Name'];
        var idForVehicle = row.data()['Customer_Id'];
        document.cookie = "customerId="+idForVehicle;
        document.cookie = "customerName="+username;
        window.location.href = 'customers.php';
    } );

    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.delete', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
        var username = row.data()['Name'];
        var id = row.data()['Customer_Id'];
        document.getElementById('deleteid').value = id;

        document.getElementById('deleteForm').style.display = 'block';
        document.getElementById('editForm').style.display = 'none';
        document.getElementById('addForm').style.display = 'none';
    } );

        // Add event listener for opening and closing details
    $('#example tbody').on('click', 'tr td.edit', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );

        // console.log( table.row( this ).data() );
        // alert( table.row( this ).data()['Name'] );
        var username = row.data()['Name'];
        var creditSale = row.data()['Credit_Sale'];
        var id = row.data()['Customer_Id'];

        document.getElementById('username').value = username;
        document.getElementById('id').value = id;
        //document.getElementById('vehicle_id').value = vehicle_id;
        //document.getElementById('number').value = number;

        if (creditSale=='Yes') {
        document.getElementById('creditSaleOn').checked = true;
        }else if(creditSale=='No'){
        document.getElementById('creditSaleOff').checked = true;
        }
        document.getElementById('editForm').style.display = 'block';
        document.getElementById('addForm').style.display = 'none';
        document.getElementById('deleteForm').style.display = 'none';
    } );
    
} );

</script>