<link rel="stylesheet" href="css/jquery-ui.css" />
<link href="style1.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/jquery.autocomplete.css" type="text/css" />
<link rel="stylesheet" href="CalendarControl.css" type="text/css" />
<script language="javascript" src="CalendarControl.js"></script>
<script src="js/jquery/jquery.js" type="text/javascript"></script>
<script src="js/jquery/jquery-1.8.2.js"></script>
<script src="js/jquery/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery/autocomplete_jquery_plugin.js"></script>
<script src="js/enter_event_ajax.js" type="text/javascript"></script>

<script>
function media_report(from_date,to_date,job_card_no,buyer_name,roll_size,type_1,jobtype,jobcard_from,jobcard_to,status)
{
 if(type_1=='Purchases'){
  jQuery.ajax({
    type: "GET",
    url: "report/media_report/purchase_report_list.php",
    data: "from_date="+from_date+"&to_date="+to_date+"&item_name="+roll_size+"&buyer_name="+buyer_name+"&type_1="+type_1,
    success: function(msg){
      jQuery("#purchase_report_list_div").html(msg);
    }
  });
 }
 else if(type_1=='Usages'){
  jQuery.ajax({
    type: "GET",
    url: "report/media_report/usages_report_list.php",
    data: "from_date="+from_date+"&to_date="+to_date+"&job_card_no="+job_card_no+"&buyer_name="+buyer_name+"&roll_size="+roll_size+"&type_1="+type_1+"&jobtype="+jobtype+"&jobcard_from="+jobcard_from+"&jobcard_to="+jobcard_to+"&status="+status,
    success: function(msg){
      jQuery("#purchase_report_list_div").html(msg);
    }
  });
 }
 else if(type_1=='Return'){
  jQuery.ajax({
    type: "GET",
    url: "report/media_report/return_media_report_list.php",
    data: "from_date="+from_date+"&to_date="+to_date+"&supplier_name="+buyer_name+"&roll_size="+roll_size+"&type_1="+type_1,
    success: function(msg){
      jQuery("#purchase_report_list_div").html(msg);
    }
  });
 }
 else {
  jQuery.ajax({
    type: "GET",
    url: "report/media_report/pending_report_list.php",
    data: "from_date="+from_date+"&to_date="+to_date+"&buyer_name="+buyer_name+"&job_card_no="+job_card_no+"&roll_size="+roll_size+"&type_1="+type_1+"&jobtype="+jobtype+"&jobcard_from="+jobcard_from+"&jobcard_to="+jobcard_to,
    success: function(msg){
      jQuery("#purchase_report_list_div").html(msg);
    }
  });
 }
}

var po = jQuery.noConflict();
po().ready(function() 
{ 
  po("#job_card_no").autocomplete("include/autocomplete/jobcard_no_media_autocomplete.php", {
    width: 200,
    matchContains: true,
    selectFirst: true
  });
});

var cus = jQuery.noConflict();
cus().ready(function() 
{ 
  cus("#buyer_name").autocomplete("include/autocomplete/cust_name_job_auto_complete.php", {
    width: 200,
    matchContains: true,
    selectFirst: true
  });
});

var roll = jQuery.noConflict();
roll().ready(function() 
{ 
  roll("#roll_size").autocomplete("include/autocomplete/particulars_media_report_auto.php", {
    width: 200,
    matchContains: true,
    selectFirst: true
  });
});

jQuery(document).ready(function($) {
  // Toggle the usage filters row on page load and type change
  function toggleUsagesFilters() {
    if ($('#type_1').val() === 'Usages') {
      $('#usages_filters').show();
    } else {
      $('#usages_filters').hide();
      // Clear values when hidden (optional)
      $('#jobcard_from').val('');
      $('#jobcard_to').val('');
      $('#status').val('All');
    }
  }

  toggleUsagesFilters();

  $('#type_1').change(function() {
    toggleUsagesFilters();
  });

  // Autocomplete for the new jobcard_from and jobcard_to inputs
  $('#jobcard_from').autocomplete("include/autocomplete/jobcard_no_media_autocomplete.php", {
    width: 200,
    matchContains: true,
    selectFirst: true
  });

  $('#jobcard_to').autocomplete("include/autocomplete/jobcard_no_media_autocomplete.php", {
    width: 200,
    matchContains: true,
    selectFirst: true
  });
});
</script>

<style type="text/css">
.style7{font-family: Tahoma, Arial, Helvetica, sans-serif;font-size: 13px;}
.style9{ text-align:left;font-family:Tahoma, Arial, Helvetica, sans-serif; font-size: 15px; padding:0px; font-weight: 600;color:#333;letter-spacing: 1px;padding:10px; background-color:#f7f7f7;}
.types_class { 
    height: 25px; 
    width: 230px; 
    background-color: transparent;  
    border-style: solid;  
    border-width: 0px 0px 1px 0px;  
    border-color:#CCC; 
    outline:0;
    font-size:14px;
  } 
  
  .types_class1 { 
    height: 25px; 
    width: 140px; 
    background-color: transparent;  
    border-style: solid;  
    border-width: 0px 0px 1px 0px;  
    border-color:#CCC; 
    outline:0;
    font-size:14px;
  } 
.textbox:focus {
    border-color: #C9C9C9;
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0 0 8px;
}  
</style>

<div class="container">
  <div class="row-fluid">
    <div class="span12">
      <div class="table-responsive">
        <form name="inward_outward_report" id="inward_outward_report" method="post" action="" enctype="multipart/form-data">
          <table width="100%" border="0" align="center" style="border-top:solid 1px; color:#ddd;">
            <tr align="left"><div class="style9">Media Report&nbsp;&nbsp;</div><tr></table>
          <table width="100%" cellpadding="0" cellspacing="0">
            <tr>
              <td width="8%" align="left" class="style7"><strong>&nbsp;&nbsp;From Date</strong></td> 
              <td width="18%" align="left" class="style15">
                <input type="date" class="types_class1" name="from_date" id="from_date" style="height:23px;width:150px;" value="<?php echo date("Y-m-d"); ?>" />
              </td>

              <td width="12%" align="left" class="style7"><strong>&nbsp;&nbsp;To Date</strong></td> 
              <td width="20%" align="left" class="style15">
                <input type="date" class="types_class1" name="to_date" id="to_date" style="height:23px;width:150px;" value="<?php echo date("Y-m-d"); ?>" />
              </td>

              <td width="10%" align="left" class="style7"><strong>&nbsp;&nbsp;Jobcard No</strong></td> 
              <td width="13%" align="left" class="style15" style="padding-right:10px;">
                <input type="text" class="types_class1" name="job_card_no" id="job_card_no" style="height:23px;width:150px;" value="<?php if($_GET['job_card_no']!='') { echo $_GET['job_card_no']; } ?>" />
              </td>
            </tr>

            <tr>
              <td width="13%" align="left" class="style7"><strong>&nbsp;&nbsp;Buyer Name</strong></td> 
              <td width="13%" align="left" class="style15">
                <input type="text" class="types_class1" name="buyer_name" id="buyer_name" style="height:23px;width:200px;" value="" />
              </td>

              <td width="13%" align="left" class="style7"><strong>&nbsp;&nbsp;Roll Size</strong></td> 
              <td width="13%" align="left" class="style15">
                <input type="text" class="types_class1" name="roll_size" id="roll_size" style="height:23px;width:150px;" value="" />
              </td>

              <td width="10%" align="left" class="style7"><strong>&nbsp;&nbsp;Type</strong></td> 
              <td width="13%" align="left" class="style15">
                <select name="type_1" class="types_class1" id="type_1" style="height:23px;width:150px;">
                  <option value="Purchases">Purchases</option>
                  <option value="Usages">Usages</option>
                  <option value="Return">Return</option>
                  <option value="Pending">Pending</option>
                </select>
              </td>
            </tr>

            <tr>
              <td width="10%" align="left" class="style7"><strong>&nbsp;&nbsp;Jobcard From</strong></td> 
              <td width="13%" align="left" class="style15" style="padding-right:10px;">
                <input type="text" class="types_class1" name="jobcard_from" id="jobcard_from" style="height:23px;width:150px;" />
              </td>

              <td width="10%" align="left" class="style7"><strong>&nbsp;&nbsp;Jobcard To</strong></td> 
              <td width="13%" align="left" class="style15" style="padding-right:10px;">
                <input type="text" class="types_class1" name="jobcard_to" id="jobcard_to" style="height:23px;width:150px;" />
              </td>

              <td width="10%" align="left" class="style7"><strong>&nbsp;&nbsp;Status</strong></td>
              <td width="13%" align="left" class="style15">
                <select name="status" id="status" class="types_class1" style="height:23px;width:150px;">
                  <option value="All">All</option>
                  <option value="Pending">Pending</option>
                  <option value="Completed">Completed</option>
                </select>
              </td>
            </tr>

            <tr>
              <td width="10%" align="left" class="style7"><strong>&nbsp;&nbsp;Job Type</strong></td> 
              <td width="13%" align="left" class="style15">
                <select id="jobtype" name="jobtype" class="types_class1">
                  <option value="">All</option>
                  <?php
                    include ("../../include/db.php");
                    $sql="select * from job_type_creation order by job_type ASC";
                    $sql123 = mysql_query($sql);
                    while($fetch_sql123=mysql_fetch_array($sql123)) {
                      $job_type=$fetch_sql123['job_type'];
                  ?>
                  <option value="<?php echo $job_type?>"><?php echo $job_type; ?></option>
                  <?php } ?>
                </select>
              </td>

              <td width="9%" align="left" class="style7">
                <a href="#" onClick="media_report(
                  from_date.value,
                  to_date.value,
                  job_card_no.value,
                  buyer_name.value,
                  roll_size.value,
                  type_1.value,
                  jobtype.value,
                  jobcard_from.value,
                  jobcard_to.value,
                  status.value
                )">
                  <img src="img/search_icon.png" width="40" height="35" title="Search" value="Search" />
                </a>
              </td> 
            </tr>
          </table>

          <table width="100%">
            <tr>
              <td colspan="3" align="center">
                <div id="purchase_report_list_div">
                  <?php include("purchase_report_list.php"); ?>
                </div>
              </td>
            </tr>
          </table>
        </form>
      </div>
    </div>
  </div>
</div>
