@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;
    }
    
</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">
              @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>
                          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                          </button>
                    </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-6 col-md-6 col-xs-6">
                <label>Product Name:<span class="form-compulsory"> * </span></label>
              </div>
              <div class="col-sm-5 col-md-5 col-xs-5">
                <label>Label Count:<span class="form-compulsory"> * </span></label>
              </div>
            </div>
            <div class="card-body input_fields_wrap" style="padding-top: 0px; padding-bottom: 0px;">
                @php $x     = 1; @endphp
                @if(Session::has('order_details'))

                  @foreach(Session::get('order_details')['product_details'] as $t_products)
                    
                  <div class="row">
                    <div class="col-xs-6 col-sm-6 col-md-6">
                      <div class="form-group">
                        <input placeholder="Product Name" disabled class="form-control form-control-sm  form-control-sm product-name" id="p_name{{$x}}" name="product_name[]" type="text" autocomplete="off" value="{{$t_products['product_name']}}" >
                      </div>
                    </div>
                    <div class="col-xs-5 col-sm-5 col-md-5">
                      <div class="form-group">
                        <input placeholder="Label Count" class="form-control form-control-sm  product-label" id="prid{{$x}}" name="label_count[]" value="{{$t_products['label_count']}}" type="number" min="1">
                        <input type="hidden" name="product_id[]" class="product_ids" value="{{$t_products['product_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>
                  @php $x++; @endphp
                  @endforeach
                @endif

                <div class="row " >
                    <div class="col-xs-6 col-sm-6 col-md-6">
                        <div class="form-group">                            
                            {!! Form::text('product_name[]', null, array('placeholder' => 'Product Name','class' => 'form-control form-control-sm  product-name', 'id' => 'tags_create')) !!}
                          <span style="display:none; color: red;" id="product_error_msg"></span>
                            
                        </div>
                    </div>
                    <div class="col-xs-5 col-sm-5 col-md-5">
                        <div class="form-group">
                            {!! Form::number('label_count[]', null, array('placeholder' => 'Label Count','class' => 'form-control form-control-sm 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 class="row verifier_approver_section" >
                  <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
                          @foreach($verifiers as $id => $verifier)
                            @php $temp_verifier[$verifier->id]   = $verifier->name @endphp
                          @endforeach
                          {!! Form::select('verifier', $temp_verifier, (Session::has('order_details')? Session::get('order_details')['verifier_id']: null),array('class' => 'form-control form-control-sm')) !!}
                      </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
                          @foreach($approvers as $id => $approver)
                            @php $temp_approver[$approver->id]   = $approver->name @endphp
                          @endforeach
                          {!! Form::select('approver', $temp_approver,(Session::has('order_details')? Session::get('order_details')['approver_id']: null),array('class' => 'form-control form-control-sm')) !!}
                          <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 form-control-sm', 'id' => 'tags_create', 'rows' => '2')) !!}
                        </div>
                    </div>
                </div>
              </div>
              <div class="row card-body" @if(!Session::has('order_details')) style="display:none; padding-top: 0;" @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>
        <!-- /.col -->
        <div class="col-3">
          @include('components.dashboard.vertical')
        </div>
      </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/resources/views/orders/create1.blade.php</b> on line <b>201</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();

                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"><div class="col-xs-6 col-sm-6 col-md-6"><div class="form-group"><input placeholder="Product Name" disabled class="form-control form-control-sm  product-name" id="p_name' + (x - 1) + '" name="product_name[]" type="text" autocomplete="off" value="'+p_name+'" ></div></div><div class="col-xs-5 col-sm-5 col-md-5"><div class="form-group"><input placeholder="Label Count" class="form-control form-control-sm  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('');
                $(wrapper).prepend(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/resources/views/orders/create1.blade.php</b> on line <b>266</b><br />
null;
            var image_url           = '{{asset("../storage/app/images/")}}';
            $.each(availableAttributes, function( index, value ) {
                products.push({
                  id            : value.id,
                  
                  p_name        : value.product_name,
                  
                  code          : value.product_code,
                  image         : image_url+'/'+value.product_image,
                  brand_name    : value.brand_name,

                  label         : value.product_name+'|<span style="font-size:10px;"><b>'+value.product_code+' | '+value.brand_name+'</b></span>', 
                  desc          : value.description,
                }); 
            });
          
          $( "#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);
                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 ) {
            return $( "<li>" )
              .append('<div class="row"><div class="col-md-2" style="float:left"><img src="'+item.image+'" width="60" style="border-radius:5px;"/></div> <div class="col-md-10" style="float:left"><span><b>'+item.label+'</b></span ><div style="font-size:13px;">'+item.desc+'</div> </div></div> ')
              .appendTo( ul );
          };
        } );

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

      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