@extends('page')

@section('content')
<style>
  .ui-menu .ui-menu-item {
        border-bottom: solid 1px #ccc
    }
  .ui-state-active{
        border-bottom: solid 5px #ccc;
        background-color: red;
    }
    

.fake-input { position: relative; width:240px; }
.fake-input input {display:block; width: 100%; box-sizing: border-box }
.fake-input img { position: absolute; top: 2px; right: 5px }
</style>

<!-- Content Header (Page header) -->
  <section class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1>New Order</h1>
        </div>
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="{{ route('orders.index') }}">List Orders</a></li>
            <li class="breadcrumb-item active">Create</li>
          </ol>
        </div>
      </div>
    </div><!-- /.container-fluid -->
  </section>

  @if (count($errors) > 0)
    <div class="alert alert-danger">
        <strong>Whoops!</strong> There were some problems with your input.<br><br>
        <ul>
        @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
        @endforeach
        </ul>
    </div>
  @endif

<!-- Main content -->
  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-9">
          <div class="card card-info card-outline user-box">
              @if($message = Session::get('success'))
                  <div class="row">
                    <div class="alert alert-success alert-dismissible fade show text-right col-md-12" role="alert">
                          <p>{{ $message }}</p>
                    </div>
                  </div>
              @endif
            <!-- /.card-header -->
            {!! Form::open(array('route' => 'placeorder','method'=>'POST', 'files'=> true, 'id' => 'product_form')) !!}
            <div class="row" style="padding: 1.25rem 1.25rem 0 1.25rem;">
              <div class="col-sm-9 col-md-9col-xs-9">
                <label>Product Name:<span class="form-compulsory"> * </span></label>
              </div>
              <div class="col-sm-3 col-md-3 col-xs-3">
                <label>Label Count:<span class="form-compulsory"> * </span></label>
              </div>
            </div>
            <div class="card-body "  style="padding-top: 0px; padding-bottom: 0px;">
                @php $x     = 1; @endphp
              <div class="input_fields_wrap">
                <div class="row " >
                    <div class="col-xs-9 col-sm-9 col-md-9">
                        <div class="form-group">                            
                            {!! Form::text('product_name[]', null, array('placeholder' => 'Product Name','class' => 'form-control product-name', 'id' => 'tags_create')) !!}
                            <input type="hidden" id="product_temp_image" value="">
                            <input type="hidden" id="product_temp_details" value="">
                            <input type="hidden" id="product_temp_description" value="">
                            <input type="hidden" id="product_temp_brand_name" value="">
                            <input type="hidden" id="product_temp_model_number" value="">
                            <input type="hidden" id="product_temp_category" value="">
                            <span style="display:none; color: red;" id="product_error_msg"></span>
                        </div>
                    </div>
                    <div class="col-xs-2 col-sm-2 col-md-2">
                        <div class="form-group">
                            {!! Form::number('label_count[]', null, array('placeholder' => 'Count','class' => 'form-control product-label', 'id' => 'label_count', 'min'=>"1")) !!}
                            <input name="product_id[]" type="hidden" id= 'product_id'>
                            <span style="display:none; color: red;" id="label_count_msg">Please Choose Label Count</span>
                        </div>
                    </div>
                    <div class="col-xs-1 col-sm-1 col-md-1 text-left">
                        <div class="form-group  add_field_button" style="padding-top:5px;">
                            <b><i class="fa fa-plus " aria-hidden="true"></i></b>
                        </div>
                    </div>
                </div>
              </div>
              <div class="row verifier_approver_section"  >
                  <div class="col-xs-12 col-sm-12 col-md-12 marT10" id='form-tit'>
                    <h5><span>User Selection</span></h5>
                  </div>

                  <div class="col-xs-6 col-sm-6 col-md-6">
                      <div class="form-group">
                          <label>Verifier:<span class="form-compulsory"> * </span></label>
                          @php $temp_verifier    = []; @endphp
                          <select name="verifier" class='form-control' required id="order_verifier">
                              <option value=""> -- Select --</option>
                              @foreach($verifiers as $id => $verifier)
                                <option value="{{$verifier->id}}">{{$verifier->name}}</option>                                
                              @endforeach
                          </select>
                            <span style="display:none; color: red;" id="msg_order_verifier"></span>
                                                </div>
                  </div>
                  <div class="col-xs-6 col-sm-6 col-md-6">
                    <div class="form-group">
                        <label>Approver:<span class="form-compulsory"> * </span></label>
                        @php $temp_approver    = []; @endphp
                        <select name="approver" class='form-control' required id="order_approver">
                            <option value=""> -- Select --</option>
                            @foreach($approvers as $id => $approver)
                              <option value="{{$approver->id}}">{{$approver->name}}</option>                                
                            @endforeach
                        </select>
                        <span style="display:none; color: red;" id="msg_order_approver"></span>
                        
                        <input type="hidden" id= 'product_id'>
                    </div>
                  </div>
                  <div class="col-xs-12 col-sm-12 col-md-12">
                      <div class="form-group">
                          <label>Note</label>
                          {!! Form::textarea('order_note', (Session::has('order_details')? Session::get('order_details')['order_note']: null), array('placeholder' => 'Order Note','class' => 'form-control', 'id' => 'tags_create', 'rows' => '2')) !!}
                      </div>
                  </div>
              </div>
            </div>
              <div class="row card-body" @if(!Session::has('order_details')) style="display:none;" @endif>
                  <div class="col-xs-12 col-sm-12 col-md-12 text-left"> 
                      <button type="submit" class="btn btn-primary users-selection">Create Order</button>
                  </div>
              </div>
            {!! Form::close() !!}
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <div class="col-3">
          @include('components.dashboard.vertical')
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </div>

    <!-- /.container-fluid -->
    <div class="modal fade show" id="modal-confirm-order"  tabindex="-1" aria-labelledby="deleteModalLabel" aria-modal="true" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title"  id="product-model-name">Order Confirmation</h5>
              <button type="button" class="close close-model" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">×</span>
              </button> 
            </div>
            <div class="modal-body">
              Are you sure, you want to continue with the order ?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary close-model  modal-btn" data-dismiss="modal">Cancel</button>
                <button type="button" id="order-confirmation-button" class="btn btn-success text-right modal-btn">Confirm</button>
            </div>
        </div>
      </div>
    </div>

  <script>

  $(document).ready(function() {
    $('.close-model').click(function(){
        $('#modal-confirm-order').hide();
    });
    @if(Session::has('order_details'))
      $('.hidden_section').show();
    @else
      $('.hidden_section').hide();
    @endif


      var max_fields = '{{count($products)+1}}'; //maximum input boxes allowed
      var wrapper = $(".input_fields_wrap"); //Fields wrapper
      var add_button = $(".add_field_button"); //Add button ID
      var x = '{{$x}}'; //initlal text box count
      var availableAttributes = <br />
<b>Warning</b>:  Undefined variable $products in <b>/home/getorigin/public_html/new/resources/views/orders/create.blade.php</b> on line <b>209</b><br />
null;

      $(add_button).click(function (e) { //on add input button click
            e.preventDefault();
            $('#label_count_msg').hide();
            $('#product_error_msg').hide();

            if (x < max_fields) {                
                var p_name          = $('#tags_create').val();
                var p_id            = $('#product_id').val();
                var p_label_count   = $('#label_count').val();
                var product_image   = $('#product_temp_image').val();
                var product_details = $('#product_temp_details').val();
                var product_desc    = $('#product_temp_description').val();
                var brand_name      = $('#product_temp_brand_name').val();
                var model_number    = $('#product_temp_model_number').val();
                var category        = $('#product_temp_category').val();

                if(p_name== ''){
                  $('#product_error_msg').html('Please Choose a Product!');                    
                  $('#product_error_msg').show();
                  return;
                }
                if(p_label_count < 1){
                  $('#label_count_msg').show();
                  return;
                }
                var choosed_products= 0;
                $('.product_ids').each(function (){
                  if(this.value == p_id){
                      choosed_products++;
                  }                  
                })
                if(choosed_products > 0){
                  $('#product_error_msg').html('Product Already Choosed!');
                  $('#product_error_msg').show();
                  return;
                }
                if(x >= 1){
                  
                  $('.users-selection').parent().parent().show();
                  $('.hidden_section').show();
                }
                x++;
                var el = '<div class="row marT10 marB10"><div class="col-xs-9 col-sm-9 col-md-9">'+
                      '<div class="list_prod_box"><div class="form-group pro_displaybox_form">'+
                        '<div class="img_wrap " style="float:left"><img src="'+product_image+'" width="60"/></div>'+
                        '<div class="col-md-11" style="float:left">';
                          if(product_details != ''){
                            el +='<div class="pro_details_box">'+product_details;
                          }
                          if(brand_name != ''){
                              el += '<div class="separator">|</div>'+
                              '<div class="prod_brand">'+brand_name+'</div>';
                          }
                          if(model_number != ''){
                              el += '<div class="separator">|</div>'+
                              '<div class="prod_modeln">'+model_number+'</div>';
                          }
                          if(category != ''){
                              el +='<div class="separator">|</div>'+
                              '<div class="prod_category">'+category+'</div>';
                          }
                            el += '</div>';
                          if(product_desc != ''){
                            el += '<div style="font-size:13px;">'+product_desc+'</div>';
                          }
                        el += '</div>'+
                      '</div>'+
                      '</div></div><div class="col-xs-2 col-sm-2 col-md-2">'+
                        '<div class="form-group">'+
                          '<input placeholder="Label Count" class="form-control product-label" id="prid' + (x - 1) + '" name="label_count[]" value="'+p_label_count+'" type="number" min="1">'+
                          '<input type="hidden" name="product_id[]" class="product_ids" value="'+p_id+'">'+
                        '</div>'+
                      '</div>'+
                      '<div class="col-xs-1 col-sm-1 col-md-1 text-left">'+
                        '<div class="form-group remove_field" style="padding-top:5px;"> '+
                          '<i class="fa fa-minus fa-1x" aria-hidden="true"></i>'+
                      '</div >'+
                    '</div>'+
                  '</div>';

                $('#tags_create').val('');
                $('#product_id').val('');
                $('#label_count').val('');

                $('#product_temp_image').val('');
                $('#product_temp_details').val('');
                $('#product_temp_description').val('');
                $('#product_temp_brand_name').val('');
                $('#product_temp_model_number').val('');
                $('#product_temp_category').val('');
                $(wrapper).append(el);
            }
        });

   
      $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
          e.preventDefault();
          $(this).parent().parent('div').remove();
          x--;
          $('.users-selection').parent().parent().show();
          $('.hidden_section').show();

          $('.submit-section').hide();
          if(x == 1){
              $('.users-selection').parent().parent().hide();
              $('.hidden_section').hide();

          }
      });       

      $( function() {
          var products              = [];
            var availableAttributes = <br />
<b>Warning</b>:  Undefined variable $products in <b>/home/getorigin/public_html/new/resources/views/orders/create.blade.php</b> on line <b>323</b><br />
null;
            var image_url           = '{{asset("../storage/app/images/")}}';
            $.each(availableAttributes, function( index, value ) {
                if(value.category){
                  var tem_category  = value.category.category
                }else{
                  var tem_category  =  '-- --';
                }
                products.push({
                  id            : value.id,
                  label         : '<div class="prod_code">'+value.product_code+'</div><div class="separator">|</div><div class="prod_name">'+value.product_name+'</div>',
                  p_name        : value.product_name,
                  desc          : value.description,
                  code          : value.product_code,
                  brand_name    : value.brand_name,
                  model_number  : value.model_number,
                  category      : tem_category,
                  image         : image_url+'/'+value.product_image,
                }); 
            });
          
          $( "#tags_create" ).autocomplete({
            minLength: 1,
            source: products,
            focus: function( event, ui ) {
              $( "#tags_create" ).val( ui.item.p_name );
              return false;
            },
            select: function( event, ui ) {
                $('#tags_create').val(ui.item.p_name);
                $('#product_id').val(ui.item.id);

                $('#product_temp_image').val(ui.item.image);
                $('#product_temp_details').val(ui.item.label);

                $('#product_temp_brand_name').val(ui.item.brand_name);
                $('#product_temp_model_number').val(ui.item.model_number);
                $('#product_temp_category').val(ui.item.category);
                $('#product_temp_description').val(ui.item.desc);

                if($(".product-name").length >= 1){
                  $('.users-selection').parent().parent().show();
                  $('.hidden_section').show();

                }
                return false;
            },
            open: function() {
              $("ul.ui-menu").width( $(this).innerWidth() );
            } 
          })
          .autocomplete( "instance" )._renderItem = function( ul, item ) {

            var temp_product_html = '<div class="row"><div class="img_wrap"><img src="'+item.image+'" width="60" style="border-radius:5px;"/></div> <div class="col-md-9" style="float:left"><div class="pro_details_box">'+item.label;
              if(item.brand_name != ''){
                temp_product_html += '<div class="separator">|</div>'+
                              '<div class="prod_brand">'+item.brand_name+'</div>';
              }
              if(item.model_number != ''){
                temp_product_html += '<div class="separator">|</div>'+
                              '<div class="prod_modeln">'+item.model_number+'</div>';
              }

              if(item.category != ''){
                temp_product_html += '<div class="separator">|</div>'+
                    '<div class="prod_category">'+item.category+'</div>';
              }
              temp_product_html += '</div>';
              if(item.desc != ''){
                temp_product_html +='<div style="font-size:13px;">'+item.desc+'</div>'+
                            '</div></div>';
              }
            return $( "<li>" )
              .append(temp_product_html)
              .appendTo( ul );
          };
        } );

  $('.users-selection').click(function(e) {
      e.preventDefault();
      var order_flag                      = 0;
      $('#label_count_msg').hide();
      $('#product_error_msg').hide();
      $('#msg_order_approver').hide();
      $('#msg_order_verifier').hide();

      var order_approver = $("#order_approver option:selected").val();
      if(order_approver == "")
      {
          $("#msg_order_approver").show();
          $("#msg_order_approver").html("Please select Approver");
          order_flag++;
      }

      var order_verifier = $("#order_verifier option:selected").val();
      if(order_verifier == "")
      { 
          $("#msg_order_verifier").show();
          $("#msg_order_verifier").html("Please select Verifier");
          order_flag++;
      }

      if($(".product-name").last().val() != ''){
        if($(".product-label").last().val() == ''){
          $('#label_count_msg').show();
          order_flag++;
        }
      }

      var p_name          = $('#tags_create').val();
      if(p_name == ''){
        $('#product_id').val('');
      }

      var p_id            = $('#product_id').val();
      var p_label_count   = $('#label_count').val();

      var choosed_products= 0;
      $('.product_ids').each(function (){
        if(this.value == p_id){
            choosed_products++;
        }                  
      })
      if(choosed_products > 0){
        $('#product_error_msg').html('Product Already Choosed!');
        $('#product_error_msg').show();
        order_flag++;
      }

      $('.product-name').each(function (){
        if($(this).val() == '' ){
          if(!$(this).attr('id') == 'tags_create'){
            $('#product_error_msg').html('Choose a Product');
            $('#product_error_msg').show();
            $(this).focus();
            order_flag++;
          }
        }
      });

      if(order_flag == 0){
        $('#modal-confirm-order').modal('show');
      } 
  });

  $('#order-confirmation-button').click(function(e){
      e.preventDefault();
      $('#order-confirmation-button').prop("disabled", true);
      $('.modal-footer .btn').prop("disabled", true);
      $('#order-confirmation-button').html('<i class="fa fa-spinner fa-spin"></i>');
      $('#product_form').submit();
  });
});
  </script>
@endsection