@extends('layouts.admin')

@section('content')
<div class="row">
  <div class="col-md-12">
     <div class="card shadow-lg">
      <div class="card-body pt-5">
        
        <form class="user" action="{{ route('order.save') }}" method="post">
          @csrf
          <div class="row justify-content-md-center">
            @if ($errors->any())
              <div class="col-md-12 mt-3">
                <div class="alert alert-danger bg-gradient-danger">
                  <ul style="list-style: none;margin-bottom: 0;color: #fff;">
                      @foreach ($errors->all() as $error)
                          <li>{{ $error }}</li>
                      @endforeach
                  </ul>
                </div>
              </div>
            @endif
            <div class="col-md-12 mt-3">
              <div class="row justify-content-md-center">
                <div class="col-md-12 text-center">
                  <h1 class="h4 text-gray-900 mb-4">Add Order</h1>
                </div>
                <!-- <div class="col-md-6 mt-3">
                  <div class="form-group bmd-form-group">
                    <label>Order name *</label>
                    <input type="text" name="name" class="form-control form-control-user" required value="{{ old('name') }}">
                    {!! $errors->first('name', '<p class="help-block text-danger mb-0">:message</p>') !!}
                  </div>
                </div> -->
              </div>

              <div class="row justify-content-md-center">
                <div class="col-md-6 mt-3">
                  <div class="form-group bmd-form-group">
                    <label>Customer name *</label>
                    <!-- <a href="javascript:;" id="add_new_customer" class="btn btn-primary btn-sm pull-right">Add new</a> -->
                    <input type="text" name="customer" id="customer" class="form-control form-control-user" required value="{{ old('customer') }}">
                    <input name="cust_id" type="hidden" id="cust_id" value="0" />
                    {!! $errors->first('customer', '<p class="help-block text-danger mb-0">:message</p>') !!}
                  </div>
                </div>
              </div>

              <div class="new_customer">
                <input type="hidden" name="new_customer" id="new_customer" value="0">
                <div class="row justify-content-md-center">
                  <div class="col-md-6">
                    <div class="form-group bmd-form-group">
                      <label>Customer email</label>
                      <input type="text" name="cus_email" id="cus_email" class="form-control form-control-user" value="{{ old('cus_email') }}">
                      {!! $errors->first('cus_email', '<p class="help-block text-danger mb-0">:message</p>') !!}
                    </div>
                  </div>
                </div>
                <div class="row justify-content-md-center">
                  <div class="col-md-6">
                    <div class="form-group bmd-form-group">
                      <label>Customer address </label>
                      <input type="text" name="cus_address" id="cus_address" class="form-control form-control-user" value="{{ old('cus_address') }}">
                      {!! $errors->first('cus_address', '<p class="help-block text-danger mb-0">:message</p>') !!}
                    </div>
                  </div>
                </div>
              </div>

              <div class="row justify-content-md-center">
                <div class="col-md-6 mt-3">
                  <div class="form-group bmd-form-group">
                    <label>Order date</label>
                    <input type="text" name="order_date" class="form-control form-control-user datepicker" data-provide="datepicker" value="{{ date('d-m-Y') }}" autocomplete="off">
                    {!! $errors->first('order_date', '<p class="help-block text-danger mb-0">:message</p>') !!}
                  </div>
                </div>
              </div>

              <div class="row justify-content-md-center">
                <div class="col-md-6">
                  <div class="form-group bmd-form-group">
                    <label>Quotation </label>
                    <input type="text" name="quotation" id="quotation" class="form-control form-control-user" value="{{ old('quotation') }}">
                    {!! $errors->first('quotation', '<p class="help-block text-danger mb-0">:message</p>') !!}
                  </div>
                </div>
              </div>

              <div class="row justify-content-md-center">
                <div class="col-md-6">
                  <div class="form-group bmd-form-group">
                    <label>PR No </label>
                    <input type="text" name="pr_no" id="pr_no" class="form-control form-control-user" value="{{ old('pr_no') }}">
                    {!! $errors->first('pr_no', '<p class="help-block text-danger mb-0">:message</p>') !!}
                  </div>
                </div>
              </div>

              <div class="row justify-content-md-center">
                <div class="col-md-6">
                  <div class="form-group bmd-form-group">
                    <label>PO No </label>
                    <input type="text" name="po_no" id="po_no" class="form-control form-control-user" value="{{ old('po_no') }}">
                    {!! $errors->first('po_no', '<p class="help-block text-danger mb-0">:message</p>') !!}
                  </div>
                </div>
              </div>

              <div class="row justify-content-md-center">
                <div class="col-md-6 mt-3">
                  <div class="form-group bmd-form-group">
                    <label>Dead line</label>
                    <input type="text" name="dead_line" class="form-control form-control-user datepicker" data-provide="datepicker" value="{{ old('dead_line') }}" autocomplete="off">
                    {!! $errors->first('dead_line', '<p class="help-block text-danger mb-0">:message</p>') !!}
                  </div>
                </div>
              </div>

               <div class="row justify-content-md-center">
                <div class="col-md-6 mt-3">
                  <div class="form-group bmd-form-group">
                    <label>Action delivery</label>
                    <input type="text" name="delivery" class="form-control form-control-user datepicker" data-provide="datepicker" value="{{ old('delivery') }}" autocomplete="off">
                    {!! $errors->first('delivery', '<p class="help-block text-danger mb-0">:message</p>') !!}
                  </div>
                </div>
              </div>

            </div>

            <div class="col-md-6 mt-5">
                <button type="submit" class="btn btn-primary btn-block btn-user">Save</button>
            </div>

          </div>          
          <div class="clearfix"></div>
        </form>
      </div>
    </div>
  </div>
</div>
@endsection

@section('style')
<!--<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">-->
<link rel="stylesheet" href="{{ asset('plugins/jquery-ui/themes/base/jquery-ui.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css') }}">
<!-- <link rel="stylesheet" type="text/css" href="{{ asset('assets/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css') }}"> -->

<style type="text/css">
    .ui-autocomplete {  
        padding-right: 5px;
        max-height:200px !important;
        height: 200px;
        overflow: auto !important;
    }
    select:invalid { color: gray; }
    .form-control-user{
      font-size: .8rem;
      border-radius: 10rem;
      padding: 0rem 1rem !important;
    }
    /*.new_customer{
      display: none;
    }*/
</style>
@endsection

@section('script')

<!--<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>-->
<script src="{{ asset('plugins/jquery-ui/jquery-ui.js') }}"></script>
<script src="{{ asset('assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js') }}"></script>
<!-- <script src="{{ asset('assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js') }}"></script> -->

<script type="text/javascript">
    $(function() {

        $( "#customer" ).autocomplete({
            minLength: 0, 
            source: "{{ route('customer.search') }}",
            open:function(){
                var valInput=$(this).val();
                $("#cust_id").val('');
                if(valInput!=""){
                    $(".ui-menu-item a").each(function(){
                        var matcher = new RegExp("("+valInput+")", "ig" );
                        var s=$(this).text();
                        var newText=s.replace(matcher, "<b>$1</b>");
                        $(this).html(newText);
                        $(valInput).css('border-bottom-left-radius','0');
                        $(valInput).css('border-bottom-right-radius','0');
                    }); 
                }
            },
            select: function( event, ui ) {
                $("#customer").val(ui.item.value);
                $("#cust_id").val(ui.item.id);
                $("#cus_email").val(ui.item.email);
                $("#cus_address").val(ui.item.address);
              return false;
            }
        });

        $( "#cus_email" ).autocomplete({
            minLength: 0, 
            source: "{{ route('customer.search') }}",
            open:function(){
                var valInput=$(this).val();
                if($('#customer').val() == ''){
                 $("#cust_id").val('');
                }
                if(valInput!=""){
                    $(".ui-menu-item a").each(function(){
                        var matcher = new RegExp("("+valInput+")", "ig" );
                        var s=$(this).text();
                        var newText=s.replace(matcher, "<b>$1</b>");
                        $(this).html(newText);
                        $(valInput).css('border-bottom-left-radius','0');
                        $(valInput).css('border-bottom-right-radius','0');
                    });
                }
            },
            select: function( event, ui ) {
                $(this).val(ui.item.email);
              if($('#customer').val() == '' || ui.item.value != $('#customer').val()){
                $("#cust_id").val(ui.item.id);
                $("#cus_address").val(ui.item.address);
                $("#customer").val(ui.item.value);
              }
              return false;
            }
        });

        $('.datepicker').datepicker({
            format: 'dd-mm-yyyy'
        });
        // $('.datepicker').datetimepicker('setDate', new Date());

        $('.glyphicon-arrow-right').addClass('fas fa-fw fa-long-arrow-alt-right');
        $('.glyphicon-arrow-left').addClass('fas fa-fw fa-long-arrow-alt-left');
    });

    $('#add_new_customer').click(function(){
      $('.new_customer').toggle();
      if($('#new_customer').val() == '0'){
        $('#new_customer').val('1')
        $("#cust_id").val('');
      }else{
        $('#new_customer').val('0')
      }
    });
</script>

@endsection