@extends('layouts.app')


@section('header')
<div class="card borderless-card">
  <div class="card-block primary-breadcrumb">
    <div class="breadcrumb-header">
      <h5>Item</h5>
    </div>
    <div class="page-header-breadcrumb">
      <ul class="breadcrumb-title">
        <li class="breadcrumb-item">
          <a href="{{ \URL::to('/')}}">
            <i class="fas fa-home"></i>
          </a>
        </li>
        <li class="breadcrumb-item"><a href="{{ \URL::to('item/view') }}">List Item</a>
        </li>
        <li class="breadcrumb-item"><a href="#">Add Item</a>
        </li>
      </ul>
    </div>
  </div>
</div>

@endsection


@section('content')
<div class="card">
  <div class="card-header">
    <h5>Add Item</h5>
  </div>
  <div class="card-block">
    <form class="form-horizontal create_unit" role="form" method="POST" action="{{ url('/item/store') }}" data-parsley-validate="">

      {{ csrf_field() }}

      <div class="box-body">
        <div class="row">
          <div class="col-sm-12">
            <div class="form-group">
              <label>Name  <i class="text-danger">*</i> </label><br>
              <input type="text" class="form-control" name="name" data-parsley-required data-parsley-error-message="Item name cannot be empty" >
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-sm-12">
            <div class="form-group">
              <label>Selling Price</label><br>
              <input type="number" min="1" step="any" class="form-control" name="selling_price">
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-sm-12">
            <div class="form-group">
              <label>Purchase Price</label><br>
              <input type="number" min="1" step="any" class="form-control" name="price">
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-sm-12">
            <div class="form-group">
              <label>Catalogue Number</label><br>
              <input type="text" class="form-control" name="category">
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-sm-12">
            <div class="form-group" id="itemList">
              <label>Unit</label><br>
              <select name="unit"  class="form-control">
                @foreach($details as $key => $val)
                  <option value="{{ $val['text'] }}">{{ $val['text']  }}</option>
                @endforeach
              </select>          
            </div>
            <span><input id="newItem" type="checkbox" name="newItem"/> <b>Not in Unit list Create a new item </b></span>  
          </div>
        </div>

        <div class="row" id="createNewItem" style="display: none">
          <div class="col-sm-12">
            <div class="form-group">
              <label>New Item</label><br>
              <input type="text" class="form-control" name="item">        
            </div>
          </div>
        </div>

        <div class="row">

          <div class="col-sm-12">
            <div class="form-group">
              <label>Description</label><br>
              <textarea class="form-control" placeholder="..." name="description"></textarea>
            </div>
          </div>

        </div>
      </div>
    <!-- /.box-body -->

    <div class="box-footer">
      <button type="reset" class="btn btn-danger pull-left">Reset</button>
      <button type="submit" class="btn btn-primary pull-right"><i class="fa fa-plus"></i> Add</button>
    </div>
  </form>
</div>
</div>  
<!-- /.content -->
@endsection

@section('scripts')

<script type="text/javascript">
  $(document).ready(function() {
    $('input[type="checkbox"]'). click(function(){
      if($(this). is(":checked")) {
        $('#itemList').hide();
        $('#createNewItem').show();
      }
      else if($(this). is(":not(:checked)")){
        $('#itemList').show();
        $('#createNewItem').hide();
      }
    });
  });

</script>

@endsection