@extends('admin.includes.base')
@section('content')
<div class="page-wrapper">
  <!-- ============================================================== -->
  <!-- Bread crumb and right sidebar toggle -->
  <!-- ============================================================== -->
  <div class="page-breadcrumb">
    <div class="row">
      <div class="col-5 align-self-center">
        <h4 class="page-title">Purchase Orders</h4>
        <div class="d-flex align-items-center"> </div>
      </div>
      <div class="col-7 align-self-center">
        <div class="d-flex no-block justify-content-end align-items-center">
          <div class="d-flex no-block justify-content-end align-items-center">
            <nav aria-label="breadcrumb">
              <ol class="breadcrumb">
                <li class="breadcrumb-item"> <a href="{{ url('admin/home') }}">Home</a> </li>
                <li class="breadcrumb-item active" aria-current="page">Purchase Orders</li>
              </ol>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
  @include('common.notify')
  <div class="container-fluid">
    <div class="row">
      <div class="col-8">
        <div class="card">
          <div class="card-body padd-10">
            <h4 class="card-title">Punch Purchase Order</h4>
          </div>
          <hr class="m-t-0">
          <form class="form-horizontal r-separator" action="{{route('admin.purchase.store')}}" method="POST" enctype="multipart/form-data" role="form" id="purchaseForm">
            {{csrf_field()}}
            <div class="card-body bg-light">
              <div class="row">
                <div class="col-12">
                  <div class="row">
                    <div class="col-6">
                      <div class="form-group">
                        <label for="inputEmail3" class="control-label col-form-label">Purchase No.<span class="asterrisk">*</span></label>
                        <input type="text" class="form-control" id="inputEmail3" name="purchase_number" value="{{ old('purchase_number',$purchase_number) }}" readonly="readonly">
                        @if ($errors->has('purchase_number')) <span class="help-block"> <strong>{{ $errors->first('purchase_number') }}</strong> </span> @endif </div>
                    </div>
                    <div class="col-6">
                      <div class="form-group">
                        <label for="inputEmail3" class="control-label col-form-label">Vendor<span class="asterrisk">*</span></label>
                        <select class="form-control" id="inputEmail3" name="vendor">
                          <option value="">--Select--</option>                        
						@if(!empty($vendors))
						@foreach($vendors as $vendor)	
                          <option value="{{ $vendor->id }}" @if(old('vendor')==$vendor->id) selected="selected" @endif>{{ $vendor->first_name.' '.$vendor->last_name }}</option>                          
						@endforeach
						@endif		
                        </select>
                        @if ($errors->has('vendor')) <span class="help-block"> <strong>{{ $errors->first('vendor') }}</strong> </span> @endif </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-12">
                  <table class="table table-bordered table-stripped" id="itemsTable">
                    <tr>
                      <th width="40%"><strong>Item</strong></th>
                      <th width="20%"><strong>Quantity</strong></th>
                      <th width="30%"><strong>Unit</strong></th>
                      <th width="10%"><strong>Action</strong></th>
                    </tr>
                    <tr class="item-row">
                      <td><select class="form-control" name="items[]">
                          <option value="">Select</option>
						  @if(!empty($items))
						  @foreach($items as $item)		
                          <option value="{{ $item->title }}">{{ $item->title }}</option>
						  @endforeach
						  @endif 	
                        </select>
                      </td>
                      <td>
                        <div class="input-group quantity-box" style="width: 200px;">
                          <button class="btn btn-outline-secondary minusBtn" type="button" style="border-radius:2px 0px 0px 2px;border-right: 0px;">-</button>
                          <input type="text" name="quantities[]" value="1" class="form-control text-center" />
                          <button class="btn btn-outline-secondary plusBtn" type="button" style="border-radius:0px 2px 2px 0px;border-left: 0px;">+</button>
                        </div></td>
                      <td><select class="form-control" name="units[]">
                          <option value="">Select</option>                                                  
						  @if(!empty($units))
						  @foreach($units as $unit)		
                          <option value="{{ $unit->title }}">{{ $unit->title }}</option>                          
						  @endforeach
						  @endif 	 
                        </select>
                      </td>
                      <td><button type="button" class="btn btn-danger removeRow">X</button></td>
                    </tr>
                  </table>
                  <button type="button" class="btn btn-primary mb-2" id="addMore"><i class="sl-icon-plus"></i> Add More</button>
                </div>
              </div>
              <div class="row">
                <div class="col-12">
                  <div class="form-group">
                    <label for="inputEmail3" class="control-label col-form-label">Comments<span class="asterrisk">*</span></label>
                    <textarea class="form-control" id="comments" name="comments" rows="8">{{ old('comments') }}</textarea>
                    @if ($errors->has('comments')) <span class="help-block"> <strong>{{ $errors->first('comments') }}</strong> </span> @endif </div>
                </div>
              </div>
            </div>
            <div class="card-body">
              <div class="form-group m-b-0 text-right">
                <button type="submit" class="btn btn-info waves-effect waves-light">Punch Order</button>
                <a href="{{route('admin.purchase.index')}}" class="btn btn-dark waves-effect waves-light deactive_button">Cancel</a> </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function () {
	
	// Add More Button Click Event
    $("#addMore").click(function () {
        var newRow = $(".item-row:first").clone(); // Clone the first row
        //newRow.find("input, select").val(""); // Clear input values
		newRow.find("input").val("1");
        $("#itemsTable").append(newRow); // Append new row
    });

    // Remove Row
    $(document).on("click", ".removeRow", function () {
        if ($(".item-row").length > 1) {
            $(this).closest(".item-row").remove();
        } else {
            alert("At least one row is required.");
        }
    });

    $(document).on('click', '.minusBtn', function () {
        let input = $(this).siblings('input');
        let value = parseInt(input.val());
        if (value > 1) {
            input.val(value - 1);
        }
    });

    $(document).on('click', '.plusBtn', function () {
        let input = $(this).siblings('input');
        let value = parseInt(input.val());
        input.val(value + 1);
    });
});
</script>
@endpush