<?php
session_start();

if($_SESSION['name']==''){
    header("Location:index.php");
}

?>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
  <!-- Morris chart -->
  <link rel="stylesheet" href="bower_components/morris.js/morris.css">
  <!-- jvectormap -->
  <link rel="stylesheet" href="bower_components/jvectormap/jquery-jvectormap.css">
  <!-- Date Picker -->
  <link rel="stylesheet" href="bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
  <!-- Daterange picker -->
  <link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css">
  <!-- bootstrap wysihtml5 - text editor -->
  <link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <!-- Google Font -->
  <link rel="stylesheet" href="bower_components/datatables/css/dataTables.bootstrap.min.css">
  <link rel="stylesheet" href="bower_components/datatables/css/dataTables.bootstrap.css">
  
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->

<!-- Bootstrap 3.3.7 -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Morris.js charts -->

<!-- Sparkline -->
 <script src="vendor/datatables/jquery.dataTables.js"></script>
    <script src="vendor/datatables/dataTables.bootstrap4.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<!--<script src="dist/js/pages/dashboard.js"></script>-->
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <?php include("header.php");?>
  <!-- Left side column. contains the logo and sidebar -->
  <aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <?php include("sidebar.php");?>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
  

    <!-- Main content -->
    <section class="content">
      
        <div class="row">
            <div class="col-md-12">
          <!-- Custom Tabs -->
          <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
<!--                 <li class=""><a href="#tab_11" data-toggle="tab">Invoice</a></li>-->
<!--              <li><a href="#tab_21" data-toggle="tab">View Hotel</a></li>-->
              <li class="active rm"><a href="#tab_1" data-toggle="tab">Vendor Payment History</a></li>
            
            
             
             
            </ul>
            <div class="tab-content">
                <div class="tab-pane " id="tab_11">
                    <form id='form11'>
                    Customer Name:<span class='required'></span><br>
                 <input type='text' id='name'><br>
                  Invoice Number:<span class='required'></span><br>
                  <input type='text' id='invoice_no'><br>
                  
                    Customer Mobile Number:<span class='required'></span><br>
                 <input type='text' id='msisdn'><br>
                  Invoice Date:<span class='required'></span><br>
                 <input type='text' id='invoice_date' class='datepicker' placeholder='yyyy-mm-dd'><br>
                   Invoice Amount:<span class='required'></span><br>
                 <input type='text' id='amount'><br>
                  
                  <br>
                 
                 <button class='btn btn-primary' id='add_invoice'>Add Invoice</button>
                    </form>
              </div>
               <div class="tab-pane" id="tab_21">
                 
              </div>
                
              <div class="tab-pane active" id="tab_1">
                  From:<input type='text' class='datepicker' id='from_date'>
                    to:<input type='text' class='datepicker' id='to_date'>
                   
                  <button class='btn btn-primary' id="get_invoice">Refresh</button>
<!--                  <button class='btn btn-primary' id="add_invoice_dialog">Add Invoice</button>
                  <a href='get_report.php'><button class='btn btn-primary' id="get_report">Report</button></a>-->
                  <br>  <br>  <br>
                  <table class='table' id='table1'>
                      <thead>
                          <tr><th>Sl No</th><th>Vendor Name</th>
                          <th>Invoice Number</th>
                          <th>Mobile</th>
                          <th>Invoice Date</th>
                          <th>Amount</th>
                           <th>Balance</th>
                        
                            
                          <th style='width:200px'>Action</th></tr>
                      </thead>
                      
                  </table>
                  <div id="table11_div" style="display:none">
                       <table class='table' id='table11'>
                      <thead>
                          <tr><th>Sl No</th>
<!--                              <th>Vendor Name</th>
                          <th>Invoice Number</th>-->
                            <th>Payment</th>
                          <th>Created Date</th>
                          <th>Payment Mode</th>
                          <th>Action</th>
                         
                          </tr>
                      </thead>
                      
                  </table>
                      
                      
                  </div>
              </div>
            
              <!-- /.tab-pane -->
              <div class="tab-pane" id="tab_2">
                 
              </div>
              <!-- /.tab-pane -->
              <div class="tab-pane" id="tab_3">
               
              </div>
              <!-- /.tab-pane -->
            </div>
            <!-- /.tab-content -->
          </div>
          <!-- nav-tabs-custom -->
        </div>
            
            
        </div>
        
        
        
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
 
  <!-- /.control-sidebar -->
  <!-- Add the sidebar's background. This div must be placed
       immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- jQuery 3 -->

</body>
</html>
<style>
    .required:before{
   color: red;
   content: "*";
   position: absolute;
font-weight:bold !important;font-size: 18px;
}
    
    
</style>
<script src="jquery-ui.js"></script>
<link href='jquery-ui.css' rel='stylesheet'>
<script src='notify.min.js'></script>
<script src='notify.js'></script>
<link href='chosen.css' rel='stylesheet'>
<script>
//    $("#from_date").datepicker({ dateFormat: "yy-mm-dd"}).datepicker("setDate", "0");
//    $("#to_date").datepicker({ dateFormat: "yy-mm-dd"}).datepicker("setDate", "0");
    
    function notify(data){
$.notify(data, "success");
    }
     function notify1(data){
$.notify(data, "error");
    }
    
    $("#add_invoice_dialog").click(function(){
        $("#tab_11").dialog({"title":"Add Invoice"});
    });
    
    
    
    var $input = $("#room_type").autocomplete({
    /* select: function (event, ui) {
     var value = ui.item.name
     //ac_name=$("#acc_name_val").val();   
     member_id=ui.item.value;
     }, */
    select: function (event, ui) {
    $("#room_type").val(ui.item.label); //ui.item is your object from the array
   $("#text span").html(" "+ui.item.data)
   
  
    return false;
    }, selectFirst: true,
            change: function (event, ui) {
            if (ui.item == null) {
            //here is null if entered value is not match in suggestion list
            $(this).val((ui.item ? ui.item.id : ""));
            }
            },
            response: function (event, ui) {
            if (!ui.content.length) {
            var noResult = {value: "", label: "No results found"};
            ui.content.push(noResult);
            }
            },
            // source: "car_model.php",
//            source: [
//                       
//                               
//                               
//                                {
//                                  label: "c",
//                            value: "c",
//                                },
//                         
//                            ],
            source: function( request, response ) {
        $.ajax({
          url: "get_room_type.php",
          type:"POST",
          dataType: "json",
          data: {
            q: request.term
          },
          success: function( data ) {
            response( data );
          }
        });
      },
            minLength: 0,
    });
    $("<button class='align' type='button'>&nbsp;</button>")
            .attr("tabIndex", - 1)
            .attr("title", "Show All Items")
            .insertAfter($input)
            .button({
            icons: {
            primary: "ui-icon-triangle-1-s"
            },
                    text: false
            })
            .removeClass("ui-corner-all")
            .addClass("ui-corner-right ui-button-icon")
            .click(function () {
            // close if already visible                        
            if ($input.autocomplete("widget").is(":visible")) {
            $input.autocomplete("close");
            return;
            }
            $(this).blur();
            $input.autocomplete("search", "");
            $input.focus();
            });
     $("span.ui-dialog-title").text('My New Title');

</script>
<script>

    var $input_city = $("#city").autocomplete({
    /* select: function (event, ui) {
     var value = ui.item.name
     //ac_name=$("#acc_name_val").val();   
     member_id=ui.item.value;
     }, */
    select: function (event, ui) {
    $("#city").val(ui.item.label); //ui.item is your object from the array
   $("#text span").html(" "+ui.item.data)
   
  
    return false;
    }, selectFirst: true,
            change: function (event, ui) {
            if (ui.item == null) {
            //here is null if entered value is not match in suggestion list
            $(this).val((ui.item ? ui.item.id : ""));
            }
            },
            response: function (event, ui) {
            if (!ui.content.length) {
            var noResult = {value: "", label: "No results found"};
            ui.content.push(noResult);
            }
            },
            // source: "car_model.php",
//            source: [
//                       
//                               
//                               
//                                {
//                                  label: "c",
//                            value: "c",
//                                },
//                         
//                            ],
            source: function( request, response ) {
        $.ajax({
          url: "get_city.php",
          type:"POST",
          dataType: "json",
          data: {
            q: request.term
          },
          success: function( data ) {
            response( data );
          }
        });
      },
            minLength: 0,
    });
    $("<button class='align' type='button'>&nbsp;</button>")
            .attr("tabIndex", - 1)
            .attr("title", "Show All Items")
            .insertAfter($input_city)
            .button({
            icons: {
            primary: "ui-icon-triangle-1-s"
            },
                    text: false
            })
            .removeClass("ui-corner-all")
            .addClass("ui-corner-right ui-button-icon")
            .click(function () {
            // close if already visible                        
            if ($input_city.autocomplete("widget").is(":visible")) {
            $input_city.autocomplete("close");
            return;
            }
            $(this).blur();
            $input_city.autocomplete("search", "");
            $input_city.focus();
            });
     $("span.ui-dialog-title").text('My New Title');

</script>

<script>

    var $input1 = $("#hotel_name").autocomplete({
    /* select: function (event, ui) {
     var value = ui.item.name
     //ac_name=$("#acc_name_val").val();   
     member_id=ui.item.value;
     }, */
    select: function (event, ui) {
    $("#hotel_name").val(ui.item.label); //ui.item is your object from the array
   hotel_id=ui.item.value;
    hotel_star=ui.item.star;
   
  
    return false;
    }, selectFirst: true,
            change: function (event, ui) {
            if (ui.item == null) {
            //here is null if entered value is not match in suggestion list
            $(this).val((ui.item ? ui.item.id : ""));
            }
            },
            response: function (event, ui) {
            if (!ui.content.length) {
            var noResult = {value: "", label: "No results found"};
            ui.content.push(noResult);
            }
            },
            // source: "car_model.php",
//            source: [
//                       
//                               
//                               
//                                {
//                                  label: "c",
//                            value: "c",
//                                },
//                         
//                            ],
            source: function( request, response ) {
        $.ajax({
          url: "get_hotel_name.php",
          type:"POST",
          dataType: "json",
          data: {
            q: request.term
          },
          success: function( data ) {
            response( data );
          }
        });
      },
            minLength: 0,
    });
    $("<button class='align' type='button'>&nbsp;</button>")
            .attr("tabIndex", - 1)
            .attr("title", "Show All Items")
            .insertAfter($input1)
            .button({
            icons: {
            primary: "ui-icon-triangle-1-s"
            },
                    text: false
            })
            .removeClass("ui-corner-all")
            .addClass("ui-corner-right ui-button-icon")
            .click(function () {
            // close if already visible                        
            if ($input1.autocomplete("widget").is(":visible")) {
            $input1.autocomplete("close");
            return;
            }
            $(this).blur();
            $input1.autocomplete("search", "");
            $input1.focus();
            });
     $("span.ui-dialog-title").text('My New Title');

</script>

<script>
    tab= $("#table1").DataTable();
     from_date=$("#from_date").val();     
    to_date=$("#to_date").val();     
   $("#get_report").click(function(){
       $(this).parent().attr("href","get_report_vendors.php?from_date="+from_date+"&to_date="+to_date);
       
   });
   $("body").on("click",".get_report1",function(){
        var id=$(this).attr("ids");
       $(this).parent().attr("href","get_report1_vendors.php?from_date="+from_date+"&to_date="+to_date+"&id="+id);
       
   });
 status=$("#status").val();
get_cusomers("","",status);
    $("#get_invoice").click(function(){
    from_date=$("#from_date").val();     
    to_date=$("#to_date").val();     
    status=$("#status").val();
get_cusomers(from_date,to_date,status);
  });
 
   function get_cusomers(from_date,to_date,status) {
      tab.destroy();
   
           tab= $("#table1").DataTable({
                  "processing": true,
        "serverSide": true,
        "bPaginate":true, // Pagination True
      "sPaginationType":"full_numbers", // And its type.
       "iDisplayLength": 10,
        "ajax": {
           //  "url": "get_completed_tests_for_print_backup.php",
           url:"get_invoice_completed_vendor.php", 
   data:{from_date:from_date,to_date:to_date,status:status},
   type:"POST",
   dataType:"JSON",
   
           
            "dataSrc": function (json1) {
          var return_data=new Array(); 
          var data=json1.data;
          var k=1;
          for(var i=0;i<data.length;i++){
              
        
          
          
        return_data.push({
              
          'sl':k++,
         "name":data[i].customer_name,
         "inv":data[i].invoice_no,
         "msisdn":data[i].msisdn,
         "invoice_date":data[i].invoice_date,
         "amount":data[i].amount,
         "balance":data[i].balance,
        // "credit_date":data[i].credit_date,
        // "payment_mode":data[i].payment_mode,
         "action":"&nbsp;<button ids='"+data[i].id+"' class='align balance btn btn-primary' title='Add Payment'><span class='glyphicon glyphicon-plus'></span></button>&nbsp;"
+"<button value='"+data[i].id+"' class='align btn btn-primary history' title='Show History'><span class='glyphicon glyphicon-search'></span></button>&nbsp;"
+"<a href=''><button title='Report'   ids='"+data[i].id+"'  class='get_report1 btn btn-primary'><img src='report.jpg' width='18' ></button></a>",

           "recordsTotal":11,
          
           "recordsFiltered":11
        });
       }
    $("#table1_filter").find("input").css({"width":"700px","margin-left":"-80%"});
       $("#table1_filter").find("input").attr("placeholder","Search Vendor Name or Mobile or Invoice Number");
      return return_data;
       }
    
        } ,
        "columnDefs": [
        { 
            "targets": [ 0,1,2,3,4,5,6,7], //first column / numbering column
            "orderable": false, //set not orderable
        },
        ],
        "columns": [
           { "data": "sl" },
            { "data": "name" },
               { "data": "inv" },
                   { "data": "msisdn" },
                       { "data": "invoice_date" },
                           { "data": "amount" },
                             { "data": "balance" },
                              // { "data": "credit_date" },
                                // { "data": "payment_mode" },
                                   { "data": "action" }
               
        ]
   
             });
              
                                    
       
}
   $("#add_invoice").click(function(e){
       e.preventDefault();
       var name=$("#name").val();
         var invoice_no=$("#invoice_no").val();
           var msisdn=$("#msisdn").val();
            var invoice_date=$("#invoice_date").val();
            var amount=$("#amount").val();
             var credit_date=$("#credit_date").val();
              var payment_mode=$("#payment_mode").val();
            if(name==""||invoice_no==""||msisdn==""||invoice_date==""||amount==""||payment_mode==""){
                notify1("All fields are mandatory");return false;
            }
            if(isNaN(msisdn)||isNaN(amount)){
                notify1("Mobile and amount should be numeric");return false;
            }
          $.ajax({
   url:"add_invoice_vendor.php" ,
   data:{name:name,invoice_no:invoice_no,msisdn:msisdn,invoice_date:invoice_date,amount:amount,credit_date:credit_date,payment_mode:payment_mode},
   type:"POST",
   dataType:"JSON",
  
   success:function(data1){
   $("#form11").trigger("reset");
   notify(data1+ " Row Inserted Successfully");
     $("#tab_11").dialog("close"); get_cusomers(from_date,to_date,status);
    },
   error:function(xhr){
       notify1(xhr.responseText);
   }
});
   });
   
   $('.datepicker').datepicker({
		   dateFormat: 'yy-mm-dd',
		  'autoclose': true,
                   
		});
                
                
$("body").on("click",".balance",function(){
    var ids=$(this).attr("ids");
    var html="Amount(Rs):<br><input type='text' id='payment_balance'><br>Payment Mode:<br><input type='text' class='' id='payment_mode'><br>Date:<br><input type='text'tabindex='-1' class='datepicker' id='payment_balance_date'><br><br><button ids='"+ids+"' id='update_balance' class='btn btn-primary'>Update</button>";
    $("#balance_div").html(html);
      $("#payment_balance_date").datepicker({ dateFormat: "yy-mm-dd"}).datepicker("setDate", "0");
    $("#balance_div").dialog({"title":"Update"});
});                
                  
                


$("body").on("click","#update_balance",function(){
    var ids=$(this).attr("ids");
    var payment_balance_date=$("#payment_balance_date").val();
    var payment=$("#payment_balance").val();
     var payment_mode=$("#payment_mode").val();
    if(payment==""||payment_mode==""){
           notify1("type payment and payment mode");return;
    }
    if(isNaN(payment)){
           notify1("payment should be numeric");return;
    }
     $.ajax({
   url:"update_balance_vendor.php" ,
      data:{ids:ids,payment:payment,payment_balance_date:payment_balance_date,payment_mode:payment_mode},
   type:"POST",
   dataType:"JSON",
  
   success:function(data1){
  
   notify(data1+ " Row Updated Successfully");
   $("#balance_div").dialog("close");
   get_cusomers(from_date,to_date,status);
    },
   error:function(xhr){
       notify1(xhr.responseText);
   }
});
   });
    
    

$("body").on("click",".history",function(){
    var id=$(this).val();
    history_id=id;
    tab1= $("#table11").DataTable();
     $("#table11_div").dialog({"width":"60%","title":"History"});
   get_cusomers_history(id) ;
});

   function get_cusomers_history(id) {
      tab1.destroy();
   
           tab1= $("#table11").DataTable({
                  "processing": true,
        "serverSide": true,
        "bPaginate":true, // Pagination True
      "sPaginationType":"full_numbers", // And its type.
       "iDisplayLength": 10,
        "ajax": {
           //  "url": "get_completed_tests_for_print_backup.php",
           url:"get_invoice_history_vendor.php", 
   data:{id:id},
   type:"POST",
   dataType:"JSON",
   
           
            "dataSrc": function (json1) {
          var return_data=new Array(); 
          var data=json1.data;
          var k=1;
          for(var i=0;i<data.length;i++){
              
        
          
          
        return_data.push({
              
          'sl':k++,
//         "name":data[i].customer_name,
//         "inv":data[i].invoice_no,
         "msisdn":data[i].balance,
         "invoice_date":data[i].created_on,
           "payment_mode":data[i].payment_mode,
          "action":"<button value='"+data[i].id+"' class='delete1 btn btn-primary'>Delete</button>",
           "recordsTotal":11,
          
           "recordsFiltered":11
        });
       }
    
       $("#table11_filter").find("input").attr("placeholder","Search date");
       
      return return_data;
       }
    
        } ,
       
        "columns": [
           { "data": "sl" },
            
                   { "data": "msisdn" },
                       { "data": "invoice_date" },
                       { "data": "payment_mode" },
                           { "data": "action" },
                            
               
        ]
   
             });
              
                                    
       
}




$("body").on("click",".delete",function(){
    var id=$(this).attr("value");
    if(confirm("Are You Sure?")){
     $.ajax({
   url:"invoice_delete_all_vendor.php" ,
   data:{id:id},
   type:"POST",
   dataType:"JSON",
  
   success:function(data1){
  
   notify(data1+ " Row Deleted Successfully");
  
   get_cusomers(from_date,to_date,status);
    },
   error:function(xhr){
       notify1(xhr.responseText);
   }
});
    }
   })
   
   $("body").on("click",".delete1",function(){
    var id=$(this).attr("value");
    if(confirm("Are You Sure?")){
     $.ajax({
   url:"invoice_delete_history_vendor.php" ,
   data:{id:id},
   type:"POST",
   dataType:"JSON",
  
   success:function(data1){
  
   notify(data1+ " Row Deleted Successfully");
  
   get_cusomers_history(history_id) ;get_cusomers(from_date,to_date,status);
   $("#table11_div").dialog("close");
    },
   error:function(xhr){
       notify1(xhr.responseText);
   }
});
    }
   })
   
   
    $("body").on("click",".edit",function(){
    var id=$(this).attr("value");
    
     $.ajax({
   url:"edit_vendor.php" ,
   data:{id:id},
   type:"POST",
   dataType:"JSON",
  
   success:function(data1){
 var data=data1.data;
  var html="Vendor name:<br><input type='text' id='edit_name' value='"+data[0].customer_name+"'><br><br>"
  +"Mobile:<br><input type='text' id='edit_msisdn' value='"+data[0].msisdn+"'><br><br>"
 // +"Credit Date:<br><input type='text' id='edit_credit_date' class='datepicker' value='"+data[0].credit_date+"'><br><br>"
   // +"Payment Mode:<br><input type='text' id='edit_payment_mode' class='' value='"+data[0].payment_mode+"'><br><br>"
  +"<button class='btn btn-primary' id='update' value='"+data[0].id+"'>Update</button>";
  $("#balance_div").html(html);
  $("#balance_div").dialog({"title":"Edit"});
    
   $('.datepicker').datepicker({
		   dateFormat: 'yy-mm-dd',
		  'autoclose': true,
                   
		});
    },
   error:function(xhr){
       notify1(xhr.responseText);
   }
});
   
   });
   
   
    $("body").on("click","#update",function(){
    var id=$(this).attr("value");
   var customer_name=$("#edit_name").val();
    var edit_msisdn=$("#edit_msisdn").val();
     var edit_credit_date=$("#edit_credit_date").val();
      var edit_payment_mode=$("#edit_payment_mode").val();
     $.ajax({
   url:"update_vendor.php" ,
   data:{id:id,credit_date:edit_credit_date,msisdn:edit_msisdn,customer_name:customer_name,payment_mode:edit_payment_mode},
   type:"POST",
   dataType:"JSON",
  
   success:function(data1){
  
   notify(data1+ " Row Updated Successfully");
  
  get_cusomers(from_date,to_date,status);
   $("#balance_div").dialog("close");
    },
   error:function(xhr){
       notify1(xhr.responseText);
   }
});
    
   })
   
   
   
</script>
<div id='balance_div' style='display: none'></div>
<style>
    .ui-dialog > .ui-widget-header {background: #cc6f6f;}
    #table11_div{background:#da9f9f}
    .align{display:inline-block}
      #table1 thead tr{background: green;

color: white;}
</style>