<div class="page-header">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="<%= dashboard_path %>"><%= t("views.right_panel.button.home") %></a></li>
    <li class="breadcrumb-item active"><%= t :sale %></li>
    <span class="float-right">
      <%= link_to 'Back', dashboard_path %>
    </span>
  </ol>
</div>
<style>
  @media screen and (max-width: 785px) {
    section.content{
      margin: 80px 5px 0 5px !important;
    }
  }
</style>
<div class="row">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <div class="main-box-body clearfix p-l-5 p-r-5">
        <div class="table-responsive">
          <table class="table table-">
            <tbody>
              <tr>
                 <td colspan="8">
                    <%= form_tag transactions_card_sale_trans_path, :method => :get do %>
                    <div class="row clearfix">
                      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 mbl-style">
                        <label><%= t("views.right_panel.detail.enter_keyboards") %></label>
                        <input type="text" id="sale_id" name="sale_id" class="form-control" placeholder="Sale ID/ Customer Name/ Cashier Name" style="margin-right: 10px;height: 34px;">
                      </div>

                      <% if defined? @payment_method %>
                        <div class="col-lg-2 col-md-2 col-sm-2 col-mbl-view mbl-style">
                          <label class="font-14"><%= t("views.right_panel.detail.select_payments") %></label>
                          <%= select_tag "payment_type", options_for_select(@payment_method, :selected => params[:payment_type]), :class => "form-control" %>
                        </div>
                      <% end %>

                    <% if not defined? status %>

                      <div class="col-lg-2 col-md-2 col-sm-2 col-mbl-view mbl-style">
                      <label class="font-14"><%= t("views.right_panel.detail.select_status") %></label>

                      <select name="status_type" id="status_type" class="form-control">
                        <%  @status.each do |pm| %>
                        <option class="<%=pm[1].downcase%>" value="<%=pm[1].downcase%>"><%=pm[0]%></option>
                        <%end %>
                      </select>
                    </div>
                    <% end %>
                      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-mbl-view mbl-style">
                         <label class="mbl_lbl"><%= t("views.right_panel.detail.from") %></label>
                         <input class="form-control datepicker" name="from" id="from" type="text" placeholder="From date" style="height: 34px;">
                      </div>
                      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-mbl-view mbl-style">
                        <label class="mbl_lbl"><%= t("views.right_panel.detail.to") %></label>
                        <input class="form-control datepicker" name="to" id="to" type="text" placeholder="To date" style="height: 34px;">
                      </div>

                      <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 mbl-right-btn mbl-style">
                        <label></label>
                        <br><input type="submit" value="Search" class='btn btn-primary btn-md'>
                      </div>
                    </div>
                    <% end %>
                 </td>
              </tr>

            </tbody>


          </table>

        </div>
        <div class="card" style="width:122%;">
          <div class="table-responsive">
            <table class="table table-striped">
            <thead>
              <tr>
                <th><%= t("views.right_panel.detail.sale_id") %></th>
                <th><%= t("views.right_panel.detail.req_date") %></th>
                <th><%= t("views.right_panel.detail.req_no") %></th>
                <th><%= t("views.right_panel.detail.req_amount") %></th>
                <th><%= t("views.right_panel.detail.res_date") %></th>
                <th><%= t("views.right_panel.detail.ref_no") %></th>
                <th><%= t("views.right_panel.detail.res_amount") %></th>
                <th><%= t("views.right_panel.detail.payment_type") %></th>
                <th><%= t("views.right_panel.detail.Customer_name") %></th>
                <th><%= t("views.right_panel.detail.Cashier_name") %></th>
                <th><%= t("views.right_panel.detail.detail") %></th>
                <th><%= t("views.right_panel.detail.status") %></th>
              </tr>
            </thead>

            <tbody>
                      <% if @cardSales != 0 %>
                          <% @cardSales.each do |cardSale| %>
                            <tr>

                                <td><%= link_to cardSale.sale_id, transactions_sale_path(cardSale.sale_id) rescue '-' %></td>
                                <td><%= cardSale.req_date %> <%= cardSale.req_time.utc.getlocal.strftime("%I:%M %p") %></td>
                                <td><%= cardSale.req_inv_no %></td>
                                <td><%= cardSale.req_amt %></td>
                                <td><%= cardSale.res_date %> <%= cardSale.res_time.utc.getlocal.strftime("%I:%M %p") %></td>
                                <td><%= cardSale.ref_no %></td>
                                <td><%= cardSale.res_amt %></td>
                                <td>
                                  <% if cardSale.app == 'cup' %>
                                    UnionPay
                                  <% else %>
                                    <%= cardSale.app %>
                                  <% end %>
                                </td>
                                <td><%= cardSale.sale.customer.name rescue '-' %></td>
                                <td><%= cardSale.sale.cashier_name rescue '-' %></td>
                                <td>
                                  <% if cardSale.terminal_id != ''  %>
                                    TID : <%= cardSale.terminal_id %>
                                    <br>
                                  <% end %>
                                  <% if cardSale.merchant_id != ''  %>
                                    MID : <%= cardSale.merchant_id %>
                                    <br>
                                  <% end %>
                                  <% if cardSale.batch_no != ''  %>
                                    Batch : <%= cardSale.batch_no %>
                                    <br>
                                  <% end %>
                                  <% if cardSale.trace != ''  %>
                                    Trace : <%= cardSale.trace %>
                                  <% end %>
                                </td>
                                <td><%= cardSale.status %></td>
                            </tr>
                          <% end %>
                      <% else %>
                          <tr><td colspan="10"><strong><p style="text-align: center">There is no data for search....</p></strong></td></tr>
                    <% end %>
                  </tbody>
            </table>
          <br>
           <% if @cardSales != 0 %>
               <%= paginate @cardSales %>
           <% end %>
        </div>
        </div>
      </div>

  </div>
</div>

<script type="text/javascript">
  $(function(){
    $('#receipt_no').val("<%= params[:receipt_no] %>");
    $('#from').val("<%= params[:from] %>");
    $('#to').val("<%= params[:to] %>");
    $('#status_type').val("<%= params[:status_type] %>");
    $('#sale_id').val("<%= params[:sale_id] %>");
    $('#sel_period').val("<%= params[:period] %>");

    var check_arr = [];
    search_by_period();
    $('#sel_period').change(function(){

      search_by_period();

    });

    function search_by_period(){
      var period = $('#sel_period').val();
      var period_type = 0;
      var from = "";
      var to = "";

      show_shift_name(period,period_type,from,to,'shift_item');
    }

    // OK button is clicked
    $('#from').bootstrapMaterialDatePicker().on('beforeChange', function(e, date){
      new_date = new Date(date) ;
      month    = parseInt(new_date.getMonth()+1)
      from = new_date.getDate() + "-" + month + "-" + new_date.getFullYear();
      $('#from').val(from);
      search_by_date();
    });
    $('#to').bootstrapMaterialDatePicker().on('beforeChange', function(e, date){
      new_date = new Date(date) ;
      month    = parseInt(new_date.getMonth()+1)
      to = new_date.getDate() + "-" + month + "-" + new_date.getFullYear();
      $('#to').val(to);
      search_by_date();
    });

    function search_by_date(){

      from = $("#from").val();
        to   = $("#to").val();

      var period = 0;
      var period_type = 1;

      if(to != '' && from != ''){
        shift_name = from + ',' + to;

        check_arr.push(to);

        console.log(check_arr.length)
        if(check_arr.length == 1){
          show_shift_name(period,period_type,from,to,'shift_item');
        }
        if(check_arr.length == 3){
          check_arr = [];
        }
      }

    }

    function show_shift_name(period,period_type,from,to,shift_item){
      var shift = $('#shift_name');
      if (from == '' && to == '') {
        from = $("#from").val();
            to   = $("#to").val();
      }
      shift.empty();

      var str = '';
      var param_shift = '';
      var param_shift = '<%= params[:shift_name] rescue '-'%>';

      url = '<%= reports_get_shift_by_date_path %>';

      $.get(url, {period :period, period_type :period_type, from :from, to :to, report_type :shift_item} , function(data){

        str = '<option value="0">--- All Shift ---</option>';
        $(data.message).each(function(index){

          var local_date = data.message[index].local_opening_date + ' - ' + data.message[index].local_closing_date;
          var sh_date = data.message[index].opening_date + ' - ' + data.message[index].closing_date;
          var shift_id = data.message[index].shift_id ;
          if(param_shift != ''){
            if(shift_id == param_shift){
              selected = 'selected = "selected"';
            }
            else{
              selected = '';
            }
          }else{
            selected = '';
          }
          str += '<option value="'+ shift_id +'" '+ selected +'>' + local_date + '</option>';

         // console.log(sh_date)
      })
        shift.append(str);
      });
    }
  });

</script>
